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>

菜单优先，菜单秒是您的代码

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

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

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

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

2 个答案: