聚合物1.0:在纸张菜单元素中使用模板dom-repeat来显示选择的铁页面

聚合物1.0:在纸张菜单元素中使用模板dom-repeat来显示选择的铁页面,第1张

概述使用Polymer 1.0,我创建了一个纸质抽屉面板布局.在抽屉里,我有一个使用纸质菜单的菜单,纸质菜单被绑在铁页上.我从 Content Switcheroo with Core-Pages — Polycasts #09开始采用这个例子并将其转换为使用Polymer 1.0元素.在下面的代码中,您可以看到我的评论部分,其中纸质项目是硬编码的.这很好用. 我的下一步是尝试使用< template 使用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 >    <paper-toolbar>      <div>Drawer</div>    </paper-toolbar>    <paper-menu  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 >    <paper-toolbar>      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>      <div >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

总结

以上是内存溢出为你收集整理的聚合物1.0:在纸张菜单元素中使用模板dom-repeat来显示选择的铁页面全部内容,希望文章能够帮你解决聚合物1.0:在纸张菜单元素中使用模板dom-repeat来显示选择的铁页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1117294.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存