将事件添加到聚合物纸子菜单

Question

我想根据不同的子菜单项重定向到不同的部分。 但是我正在遍历数组，因此我无法弄清楚如何根据不同的数组元素选择重定向到不同的部分。

这是我的代码：

      <paper-submenu attr-for-selected="data-route" selected="[[route]]">
      <paper-item class="menu-trigger"><iron-icon icon="icons:view-list"></iron-icon><span>Your Devices <span id="totalDevices"></span></span></paper-item>
      <paper-menu class="menu-content">
      <template is="dom-repeat" items="{{devices}}" as="device" id="sub ">
        <paper-item><div>[[device.name]]</div></paper-item>
      </template>
      </paper-menu>
      </paper-submenu>

比如，设备阵列中有3个项目。 我想根据单击的项目重定向到第1、2或3部分。 谢谢 ！！

Answer 1

向dom-repeat模板中的项目添加单击事件侦听器

<paper-item on-click="_onClickItem"><div>[[device.name]]</div></paper-item>

Polymer将在事件上添加一个model对象，您可以访问有关模板内各项的信息。 因为您具有as="device"属性，所以聚合物会将设备对象粘贴到event.model.device 。 您需要在元素定义中实现_onClickItem函数。

_onClickItem: function (event) {
    navigateToDevice(event.model.device)
}

Answer 2

        <paper-submenu>
          <a style="cursor: pointer;" class="menu-trigger">
            <iron-icon icon="supervisor-account"></iron-icon>Main menu
          </a>
          <paper-menu style="cursor: pointer;" class="menu-content sublist" class="list" attr-for-selected="data-route" selected="{{route}}">
            <a data-route="menu-first" href="/menu/first">
              <iron-icon icon="verified-user"></iron-icon>
              <span>Menu First</span>
            </a>
          </paper-menu>
          <paper-menu style="cursor: pointer;" class="menu-content sublist" class="list" attr-for-selected="data-route" selected="{{route}}">
            <a data-route="menu-second" href="/menu/second">
              <iron-icon icon="account-box"></iron-icon>
              <span>Menu Second</span>
            </a>
          </paper-menu>
        </paper-submenu>

menu-first和menu-second是您的标签

   <section data-route="menu-first">
        <menu-first></menu-first>
   </section>

（如果您正在使用Polymer Starter Kit，则只需将URL添加到routing.html）。

您应该能够添加模板重复项，以便在纸张子菜单中迭代您的列表。