使用Polymer 1.0,我创建了一个纸质抽屉面板布局.在抽屉里,我有一个使用纸质菜单的菜单,纸质菜单被绑在铁页上.我从
Content Switcheroo with Core-Pages — Polycasts #09开始采用这个例子并将其转换为使用Polymer 1.0元素.在下面的代码中,您可以看到我的评论部分,其中纸质项目是硬编码的.这很好用.
我的下一步是尝试使用< template is =“dom-repeat”>动态构建我的菜单.迭代任意数组菜单项的元素.菜单正确呈现(我可以看到绑定到数组的所有菜单项),但我无法点击这些项目,也没有显示铁页面.似乎用于attr-for-selected的data-category属性在< template is =“dom-repeat”>内部不起作用.
我可以通过哪些方式实现这一目标？
编辑：删除attr-for-selected属性并使用索引工作切换铁页,但在我的情况下,依赖于数组的索引不是一个选项.
我的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>
解决方法
从文档中尝试< 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
