聚合物紙標簽選擇無法正常工作

Question

在使用Polymer（v1.0 +）開發個人網站時，通過修改PSK（Polymer Starter Kit）的副本，當嘗試為我的用戶使用Polymer的dom-repeat模板時，我selected屬性出現了問題包含我的路線及其屬性的數組的導航菜單。

重復的行為起作用，路由起作用，並且（大多數）數據按預期起作用，但是該選擇未被正確識別和/或顯示，從而轉換為未被視覺“選中”的所選菜單項（沒有精美的選擇）效果）。

盡管我了解一些HTML，CSS和JS，但是我對Web開發還是很陌生，所以這可能是我仍然缺少的關於數據綁定或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