CODEWITHSUNDEEP
htmlcsspolymerpolymer-1.0
James Saeed
James Saeed

Reputation: 3

How to link iron selector with iron pages?

I've been working with Polymer lately, and I have an iron selector full of paper-icon-items in a paper drawer for navigation purposes. But for some reason, I can't get them to link:

<iron-selector selected="[[page]]" attr-for-selected="name">
    <paper-icon-item name="home">
        <iron-icon icon="icons:home" item-icon></iron-icon> Home
    </paper-icon-item>
    <paper-icon-item name="account">
        <iron-icon icon="social:person" item-icon></iron-icon> Account
    </paper-icon-item>
    <paper-icon-item name="news">
        <iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
    </paper-icon-item>
    <paper-icon-item name="downloads">
                    <iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
    </paper-icon-item>
    <paper-icon-item name="contact">
                    <iron-icon icon="icons:mail" item-icon></iron-icon> Contact
    </paper-icon-item>
</iron-selector>

And then the iron pages:

<iron-pages selected="[[page]]" attr-for-selected="name">
    <section name="home"> <h1>Home</h1> </section>
    <section name="account"> <h1>Account</h1> </section>
    <section name="news"> <h1>News</h1> </section>
    <section name="downloads"> <h1>Downloads</h1> </section>
    <section name="contact"> <h1>Contact</h1> </section>
</iron-pages>

Upvotes: 0

Views: 681

Answers (2)

Ofisora
Ofisora

Reputation: 2737

It is working for me when I change the code to:

    <iron-selector selected="{{pages}}" attr-for-selected="name">
      <paper-icon-item name="home">
        <iron-icon icon="icons:home" item-icon></iron-icon> Home
      </paper-icon-item>
      <paper-icon-item name="account">
        <iron-icon icon="social:person" item-icon></iron-icon> Account
      </paper-icon-item>
      <paper-icon-item name="news">
        <iron-icon icon="icons:chrome-reader-mode" item-icon></iron-icon> News
      </paper-icon-item>
      <paper-icon-item name="downloads">
        <iron-icon icon="icons:cloud-download" item-icon></iron-icon> Downloads
      </paper-icon-item>
      <paper-icon-item name="contact">
        <iron-icon icon="icons:mail" item-icon></iron-icon> Contact
      </paper-icon-item>
    </iron-selector>

    <iron-pages selected="[[pages]]" attr-for-selected="name">
      <section name="home"> <h1>Homes</h1> </section>
      <section name="account"> <h1>Account</h1> </section>
      <section name="news"> <h1>News</h1> </section>
      <section name="downloads"> <h1>Downloads</h1> </section>
      <section name="contact"> <h1>Contact</h1> </section>
    </iron-pages>

The difference is [[pages]] and {{pages}} in iron-selector.

Upvotes: 0

Craig Brogle
Craig Brogle

Reputation: 31

Square brackets are used for one way data binding, so the change to "page" made by iron-selector can't propagate. Try changing the binding type in the iron-selector:

<iron-selector selected="{{page}}" attr-for-selected="name">

This should allow the change to propagate to the iron-pages.

Upvotes: 3

Related Questions