Bind iron-page and and

Question

I just began to learn the Polymer and at the moment to bind the paper-tabs and iron-pages together, so if I click the tab the content will be loaded dynamically. After reading the documentation here is what I have at the moment

<app-toolbar>
<paper-tabs class="tabs" attr-for-selected="page" selected="{{ selectedBrowsePage }}">
    <paper-tab page="artists">
      Artist
    </paper-tab >
    <paper-tab page="artists">
      Album
    </paper-tab>
    <paper-tab page="artists">
      Project
    </paper-tab>
  </paper-tabs>
</app-toolbar>

  <iron-pages selectedBrowsePage="artist" selected="{{ selectedBrowsePage }}">
    <div attr-for-selected="page" >1</div>
  </iron-pages>

But it still doesn't work...could you please give me a hint how could I fix it?

Answer 1

Your iron-pages block has to be fixed - it consumes the selectedBrowsePage via binding but does not propagate the change anywhere. The selectedBrowsePage="artist" bit is wrong too, no such property exists on iron-pages element. Also it is invalid to use camelCase for properties to be set up through markup, use dash-case if you need.

It should be something along:

<iron-pages attr-for-selected="page" selected="{{ selectedBrowsePage }}">
  <div page="artist">1</div>
  <div page="etc...">2</div>
  ...
</iron-pages>

Pretty much the same as in paper-tabs . This way the iron-pages element once it receives some value (like "artist") through selected="{{selectedBrowsePage}}" it will look for any child element that has the attribute specified by attr-for-selected set to the corresponding value (here the first div ) and do its magical switching.

Once you get a hang of how it's working you could drop the attr-for-selected altogether as the default behavior is to use indexes.

Look throught PSK , it has that pattern laid out pretty straight.