Polymer 1.0：使用模板 dom-repeat inside paper-menu 元素以在选择时显示铁页

Question

我使用 Polymer 1.0 创建了纸抽屉面板布局。在抽屉里，我有一个使用纸质菜单的菜单，其中的纸质项目绑定在铁页上。我从 Content Switcheroo with Core-Pages -- Polycasts #09 中获取了这个示例并将其转换为使用 Polymer 1.0 元素。在下面的代码中，您可以看到我的评论部分，其中纸质项目是硬编码的。这很好用。

我的下一步是尝试通过使用 <template is="dom-repeat"> 元素迭代任意菜单项数组来动态构建我的菜单。菜单呈现正确（我可以看到绑定到数组的所有菜单项），但我无法单击这些项目并且没有显示铁页。似乎用于 attr-for-selected 的数据类别属性在 <template is="dom-repeat">.

内部不起作用

我可以通过哪些方式让它发挥作用？编辑：删除 attr-for-selected 属性并使用索引工作切换 iron-pages，但在我的情况下依赖数组的索引不是一个选项。

我的index.html如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>My Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<style>
</style>
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<style>
</style>
<template>
<paper-drawer-panel>
  <paper-header-panel drawer class="fit">
    <paper-toolbar>
      <div>Drawer</div>
    </paper-toolbar>
    <paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-category">
      <!-- This works -->
<!--
        <paper-item data-category="item1" label="item1">
            <span>John Smith</span>
        </paper-item>
        <paper-item data-category="item2" label="item2">
            <span>Jane Doe</span>
        </paper-item>
-->

      <!-- This does not work -->
      <template is="dom-repeat" items="{{names}}">
        <paper-item data-category="{{item.itemNum}}" label="{{item.itemNum}}">
          <span>{{item.first}}</span><span>{{item.last}}</span><span>{{item.itemNum}}</span>
        </paper-item>
      </template>

    </paper-menu>
  </paper-header-panel>
  <paper-header-panel main class="fit">
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div class="flex">Main Content</div>
    </paper-toolbar>
    <iron-pages selected="{{page}}" attr-for-selected="data-category">
      <section data-category="item1">
        <h1>Item 1</h1>
        <div>Item 1 content...</div>
      </section>
      <section data-category="item2">
        <h1>Item 2</h1>
        <div>Item 2 content...</div>
      </section>
    </iron-pages>
  </paper-header-panel>
</paper-drawer-panel>
</template>
<script>
Polymer({
  is: "my-app",
  ready: function() {
    this.names = [{itemNum: "item1", first: "John", last: "Smith"}, {itemNum: "item2", first: "Jane", last: "Doe"}];
  }
});
</script>
</dom-module>
</body>
</html>

Answer 1

尝试 <paper-item data-category$="{{item.itemNum}}" label$="{{item.itemNum}}">，从文档中调用 paper-item.setAttribute('data-category', itemNum) 而不是 paper-item.data-category = itemNum.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding

Polymer 1.0：使用模板 dom-repeat inside paper-menu 元素以在选择时显示铁页

Polymer 1.0: Using template dom-repeat inside paper-menu elements to display iron-pages on selection

templatetag

web-component

polymer

polymer-1.0