聚合物纸标签选择未按预期工作

Question

在使用 Polymer (v1.0+) 开发我的个人网站时，通过修改 PSK（Polymer 入门工具包）的副本，我运行遇到了我的 selected 属性问题当我尝试将 Polymer 的 dom-repeat 模板用于我的导航菜单以及我的路线及其属性的数组时。

重复行为有效，路由有效，并且（大部分）数据按预期工作，但无法识别选择 and/or 显示正确，转换为所选菜单项不可见 "selected"（没有花哨的选择效果）。

虽然我对HTML、CSS和JS有所了解，但我对网络开发还是很陌生，所以这可能是对数据绑定或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>

Answer 1

聚合物绑定到元素属性需要这样一条记录data-route$=name of route

聚合物纸标签选择未按预期工作

Polymer paper-tabs selection not working as expected

html

javascript

data-binding

web-component

polymer

这是我的：