使用Polymer 1.0,我创建了一个纸质抽屉面板布局.在抽屉里,我有一个使用纸质菜单的菜单,纸质菜单被绑在铁页上.我从Content Switcheroo使用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> …