聚合物纸标签选择无法正常工作

Question

While developing my personal website with Polymer (v1.0+), by modifying a copy of the PSK (Polymer Starter Kit), I'm running into problems with my selected attribute when trying to make use of Polymer's dom-repeat templates for my navigation menus with an array of my routes and their attributes.

The repeating behavior works, the routing works, and (most of) the data works as expected, but the selection is not recognized and/or displayed correctly, translating into the selected menu item not being visually "selected" (not having the fancy selection effects).

Although I understand a bit of HTML, CSS, and JS, I'm still quite new to web-development, so this is probably some understanding about data-binding or JS that I'm still missing.

So here are the questions:
Why does the dynamic version of the code not work? And how can I fix it?

---

Here is what I have:

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 that works:

<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 that doesn't work: _{^{(but that I'm trying to make work)}}

<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