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

Question

升级到 Polymer 1.0，我如何收听/捕获 Iron-menu-behaviour 的“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事件到控制台。

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

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