CODEWITHSUNDEEP
javascripthtmldata-bindingpolymerweb-component
CosmicGiant
CosmicGiant

Reputation: 6441

Polymer paper-tabs selection not working as expected

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>

Upvotes: 0

Views: 789

Answers (1)

Dmytro
Dmytro

Reputation: 345

Polymer binding to element attribute requires such a record data-route$=name of route

Upvotes: 1

Related Questions