聚合物下拉列表问题

Question

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

我也从Polymer .5并行迁移到1.0.但这是单独的讨论( 迁移聚合物项目.5到1.0错误).

这是我用来在body体内定义聚合物元素的代码:

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

我在页面的head部分定义了以下脚本部分:

<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部分中的Polymer或内部切换方法上放置断点
3. 页面刷新
4. 断点被击中和下拉有效

我不知道造成这个问题的原因

更新:调试时我在行中收到以下错误: Polymer('x-trigger', {

/ deep/combinator已弃用

这是否意味着我必须升级到聚合物v1来解决这个问题,还是他们对聚合物0.5的任何解决方法？

Answer 1

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