Javascript 聚合物下拉列表问题

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

我也在从Polymer.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>

halign=左


valign=顶部

我在页面的标题部分定义了以下脚本部分：

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

聚合物（“x触发器”{
切换：函数（）{
如果（！this.dropdown）{
this.dropdown=this.querySelector（“纸面下拉菜单”）；
}
this.dropdown&&this.dropdown.toggle（）；
}
});

问题是，我确实在页面中看到了图标按钮，但当我点击该按钮时，什么也没发生

进一步调试显示,

如果我在chrome中打开控制台调试器并

将断点放置在“脚本”部分的“聚合”或“内部切换”方法上

页面刷新吗

点击断点并使用下拉菜单

我不知道是什么导致了这个问题

更新：调试时，我在行中遇到以下错误： 聚合物（'x触发器'，{

/不推荐使用deep/combinator

---

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

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>

//造型
[[项目]]
继续
聚合物({
特性：{
顺序：反对，
挑选职业：{
类型：布尔型，
值：false
},
职业筛选：{
类型：字符串，
值：“”
},
职业：{
类型：数组，
值：[“屠宰场工人”，
“住宿主任”，
“会计师”，
//等等。
“动物学顾问”]
}
},
是：“个人资料编辑页面”，
职业：功能（e）{
此.set（'order.occulation'，e.model.item）；
此.set（'pickingOccupation'，false）；
},
startPickingOccupation:函数（）{
this.pickingOccupation=true；
},
stopPickingOccupation:函数（）{
this.async（函数（）{
this.pickingOccupation=false；
},500);
},
updateFilter:函数（）{
if（typeof（this.$.occulationrepeat）=“未定义”）{
返回；
}
this.set（'occupationFilter'，this.$.filterInput.value.toLowerCase（））；
this.async（函数（）{
此.$.occupationRepeat.render（）；
},50);
},
显示：功能（项目）{
如果（this.order.occulation==“”）{
返回false；
}
return（item.toLowerCase（）.search（this.occulationFilter）！=-1）；
},
PickingOccurationClass:函数（拾取）{
如果（这是挑选职业）{
返回“拾取”；
}否则{
返回“隐藏”；
}
}
});

将

脚本

移动到实际的

聚合物元件中

：

<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>

聚合物（“x触发器”{
切换：函数（）{
如果（！this.dropdown）{
this.dropdown=this.querySelector（“纸面下拉菜单”）；
}
this.dropdown&&this.dropdown.toggle（）；
}
});

在调试过程中，当断点到达时，它就会工作。我没有考虑他们的某些竞争条件吗？