javascript - polymer 下拉列表问题

Question

我很难用 Polymer 0.5 实现简单的下拉列表。

我也在从 Polymer .5 并行迁移到 1.0。但这是单独的讨论( Migrating Polymer project .5 to 1.0 error ).

这是我用来定义体内 polymer 元素的代码:

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

问题是，我确实在页面中看到了图标按钮，但是当我点击该按钮时，没有任何反应。

进一步调试显示，

1. 如果我在 chrome 中打开控制台调试器并
2. 在脚本部分的 Polymer 或内部切换方法上放置断点
3. 刷新页面
4. 断点被击中，下拉菜单正常工作

不知道是什么问题

更新:调试时我在行中收到以下错误: polymer ('x-触发器'，{

/deep/ combinator is deprecated

这是否意味着我必须升级到 polymer v1 才能解决此问题，或者他们是否有针对 polymer 0.5 的解决方法？

Answer 1

Polymer 0.5 和 1.0 的差别真的是蛮大的。您引用的/deep/选择器是我在迁移时遇到的大问题之一。

我最近将一个项目从 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>