Search code examples
javascripttypescriptpolymer

Bind iron-page and and

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?

Solution

  • 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.