在使用 Polymer (v1.0+) 开发我的个人网站时,通过修改 PSK(Polymer Starter Kit)的副本,我在尝试使用 selected
属性时遇到了问题使用 Polymer 的 dom-repeat
模板作为我的导航菜单,其中包含一系列路线及其属性。
重复行为有效,路由有效,并且(大多数)数据按预期工作,但无法正确识别和/或显示选择,转换为所选菜单项未在视觉上“选择”(没有花哨的选择效果)。
虽然我了解一些 HTML、CSS 和 JS,但我对 Web 开发仍然很陌生,所以这可能是我仍然缺少的对数据绑定(bind)或 JS 的一些了解。
以下是问题:
为什么动态版本的代码不起作用?我该如何解决它?
这是我所拥有的:
app.js:
(function (document) {
'use strict';
var app = document.querySelector('#app');
app.baseUrl = '/';
/*
* About 100 lines of unrelated "...", about 60 taken from PSK
*/
app.routeMap = [
{name: "home", text: "Home", icon: "home", url: app.baseUrl},
{name: "about", text: "About", icon: "face", url: app.baseUrl + "about"},
{name: "users", text: "Users", icon: "info", url: app.baseUrl + "users"},
{name: "contact", text: "Contact", icon: "mail", url: app.baseUrl + "contact"}
];
})(document);
<小时/>
有效的 HTML:
<template is="dom-bind" id="app">
<!-- ... -->
<paper-tabs attr-for-selected="data-route" selected="[[route]]">
<paper-tab data-route="home">
<a href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
</paper-tab>
<paper-tab data-route="about">
<a href="{{baseUrl}}about">
<iron-icon icon="face"></iron-icon>
<span>About</span>
</a>
</paper-tab>
</paper-tabs>
</template>
<小时/>
HTML 不起作用: (但我正在努力使其工作)
<template is="dom-bind" id="app">
<!-- ... -->
<paper-tabs attr-for-selected="data-route" selected="[[route]]">
<template is="dom-repeat" items="{{routeMap}}">
<paper-tab data-route="{{item.name}}">
<a href="{{item.url}}">
<iron-icon icon="{{item.icon}}"></iron-icon>
<span>{{item.text}}</span>
</a>
</paper-tab>
</template>
</paper-tabs>
</template>
最佳答案
polymer 绑定(bind)到元素属性需要这样的记录data-route$=name ofroute
关于javascript - polymer 纸标签选择未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35072019/