Вывод списка выпадающих списков

Мне очень трудно реализовать простой раскрывающийся список с Polymer 0.5.

Я также параллельно перехожу от Polymer.5 к 1.0. Но это отдельная дискуссия ( Миграция проекта Полимер с ошибкой .5 до 1.0).

Вот код, который я использую, чтобы определить полимерный элемент внутри тела:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink="">
<template>
    <shadow></shadow>
    <content></content>
</template>
</polymer-element>

Я использую элемент дальше по телу следующим образом:

<x-trigger icon="menu" relative="" noink="" role="button" tabindex="0" aria-label="menu">
    <paper-dropdown tabindex="-1" class="core-transition" style="outline: none; display: none;">
        halign = left
        <br>
        valign = top
    </paper-dropdown>
</x-trigger>

Я определил следующий раздел script в разделе главы страницы:

<script>
    Polymer('x-trigger', {
        toggle: function () {
            if (!this.dropdown) {
                this.dropdown = this.querySelector('paper-dropdown');
            }
            this.dropdown && this.dropdown.toggle();
        }
    });
</script>

Проблема в том, что я вижу кнопку значка на странице, но когда я нажимаю на эту кнопку, ничего не происходит.

Дальнейшая отладка выявлена,

  • Если я открою консольный отладчик в chrome и
  • Точка разрыва места на методе Polymer или внутри toggle в разделе script
  • Обновление страницы
  • Точка прерывания получает удары и раскрывающиеся работы

Я не знаю, что вызывает проблему.

Обновление: при отладке я получил следующую ошибку в строке: Polymer('x-trigger', {

/deep/combinator устарел

Означает ли это, что мне нужно обновить до полимера v1, чтобы решить эту проблему, или это их способ обхода для полимера 0,5?

Ответы

Ответ 1

Разница между полимерами 0,5 и 1,0 действительно велика. /Deep/selector, с которым вы ссылались, была одной из больших проблем, с которыми мне пришлось столкнуться.

Недавно я перенес проект с 0,5 на 1.0, и для этого мне пришлось изменить все экземпляры/deep/на новую нотацию.

Моим советом было бы сначала перенести с 0.5 на 1.0, а затем использовать новую документацию Polymer, чтобы придумать решение.

В этом проекте я реализовал простой раскрывающийся список. Здесь мой подход:

<dom-module id="profile-edit-page">
  <style>
    // Styling
  </style>
  <template>
    <div class="container-app">
      <div class="container-inner">

        <!-- Other form elements -->

        <input is="iron-input" id="filterInput" type="text" required placeholder="Automotive assistant" label="Occupation" bind-value="{{order.occupation}}" on-focus="startPickingOccupation" on-keydown="updateFilter" on-blur="stopPickingOccupation" class="block field input-reg mb2"></input>

        <div class$="[[pickingOccupationClass(pickingOccupation)]]">
          <paper-menu >
            <template id="occupationRepeat" is="dom-repeat" items="[[occupations]]" filter="isShown">
              <paper-item class="option" on-click="pickOccupation">[[item]]</paper-item>
            </template>
          </paper-menu>
        </div>

        <button class$="inputClass" class="btn btn-primary btn-block" on-click="forward" value="{{order.registration}}">Continue</button>
      </div>
    </div>

  </template>
</dom-module>

<script>
  Polymer({
    properties: {
      order: Object,
      pickingOccupation: {
        type: Boolean,
        value: false
      },
      occupationFilter: {
        type: String,
        value: ""
      },
      occupations: {
        type: Array,
        value: ["Abattoir Worker",
      "Accommodation Officer",
      "Accountant",
      // Etc.
      "Zoology Consultant"]
      }
    },
    is: "profile-edit-page",

    pickOccupation: function(e) {
      this.set('order.occupation', e.model.item);
      this.set('pickingOccupation', false);
    },

    startPickingOccupation: function() {
      this.pickingOccupation = true;
    },

    stopPickingOccupation: function() {
      this.async(function() {
        this.pickingOccupation = false;
      },500);
    },

    updateFilter: function() {
      if(typeof(this.$.occupationRepeat) === "undefined") {
        return;
      }
      this.set('occupationFilter', this.$.filterInput.value.toLowerCase());
      this.async(function() {
        this.$.occupationRepeat.render();
      },50);
    },

    isShown: function(item) {
      if(this.order.occupation == '') {
        return false;
      }
      return (item.toLowerCase().search(this.occupationFilter) !== -1);
    },
    pickingOccupationClass: function(picking) {
      if(this.pickingOccupation) {
        return "picking";
      } else {
        return "hidden";
      }
    }
  });
</script>

Ответ 2

Переместите script в фактический polymer-element:

<polymer-element name="x-trigger" extends="paper-icon-button" relative="" on-tap="{{toggle}}" noink="">
  <template>
      <shadow></shadow>
      <content></content>
  </template>
  <script>
      Polymer('x-trigger', {
          toggle: function () {
              if (!this.dropdown) {
                  this.dropdown = this. querySelector('paper-dropdown');
              }
              this.dropdown && this.dropdown.toggle();
          }
      });
  </script>
</polymer-element>