Polymer 1.0 找不到纸质菜单或纸质项目的事件

Question

正在升级到 Polymer 1.0，我如何listen/capture 更改 "focusedItem" 铁菜单行为？我看不到任何事件或属性更改项目更改的侦听器，即纸质菜单中纸质项目选择的更改。我在这里看不到任何此类事件：https://elements.polymer-project.org/elements/iron-menu-behavior?active=Polymer.IronMenuBehavior

Answer 1

我还没有找到任何关于此的文档（也许其他人可能运气更好），但是您正在寻找的事件是 iron-select 和 iron-deselect。这两个事件都使用处理程序格式：eventHandler(e, details)，其中：

e 就是 CustomEvent.
details 是一个 item 属性指向被选中或取消选中的元素的对象。

我设置了一个 demo on Plunker 供您试用。它有一个示例菜单，并将 e 和 details 从 iron-select 和 iron-deselect 事件记录到控制台。

话虽这么说，但是， 如果您能够避免使用该事件，而是使用绑定，我会首先推荐该路线。如果这是在自定义元素中，您可以执行以下操作：

<dom-module id="my-custom-element">
  <template>
    <div>
      <span>[[selectedMessage]]</span>
      <span>[[oldSelectedMessage]]</span>
    </div>
    <paper-menu selected="{{selectedIndex}}">
      <paper-item>This is item #0</paper-item>
      <paper-item>This is item #1</paper-item>
      <paper-item>This is item #3</paper-item>
    </paper-menu>
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-custom-element',
    properties: {
      selectedIndex: {
        type: Number,
        value: 0,
        observer: '_selectedIndexChanged'
      }
    },
    _selectedIndexChanged: function(newIndex, oldIndex) {
      if (typeof newIndex === 'number') {
        this.selectedMessage = 'You selected item #' + newIndex + '.';
      }
      if (typeof oldIndex === 'number') {
        this.oldSelectedMessage = 'Before, you had item #' + oldIndex + ' selected.';
      }
    }
  });
</script>

Answer 2

有个on-iron-select.

所以你可以做到

      <paper-menu id="categoryMenu" on-iron-select="selectCategory">
        <template is="dom-repeat" items="{{categories}}">
          <paper-item data-type="{{item.code}}">{{item.name}}</paper-item>
        </template>
        <paper-item>More</paper-item>
      </paper-menu>

脚本

app.selectCategory = function (e, item) {
    if (!app.categories) {
      return;
    }
    app.category = app.categories[app.$.categoryMenu.indexOf(item.item)];
    console.log('Select category ', app.category)
  };

但没有关于此的文档，here 是触发事件时的行。

Answer 3

我发现人们在处理 Polymer 时常常喜欢把事情复杂化。这是一个简单的方法：

JS

var menu = document.querySelector("#myMenu");
menu.addEventListener("iron-select", function(){
     console.log(menu.selected);                           // index
     console.log(menu.selectedItem.getAttribute("value")); // value
});

HTML

<paper-menu id="myMenu">
  <paper-item value="one">Foo</paper-item>
  <paper-item value="two">Bar</paper-item>
</paper-menu>

Polymer 1.0 找不到纸质菜单或纸质项目的事件

Polymer 1.0 cannot find events for paper-menu or paper-item

polymer

polymer-1.0