CODEWITHSUNDEEP
polymerpolymer-1.0
Karl Kristiansen
Karl Kristiansen

Reputation: 117

How to properly bind iron-selector to iron-pages?

I am trying to do the same basic task as this other question, iron-selector selected={{}} binding with iron-pages selected={{}}, but I believe my case must be different, since I cannot replicate the solution.

I want to have a menu of buttons with iron-selector, and when clicked, the content with iron-pagesshould change.

So I have the actual page about.htm that has 1 webcomponent for the button-menu, called about-buttons.htm and then 1 webcomponent for each page, that should load according to which button is pushed by the user; about-who.htm, about-manifesto and about-team.

My question is:

How can I with this structure of my web components bind my buttons with my pages - and / or why is my current method wrong?

There's a lot of different ways to do a simple data binding like this. My method here is definitely not simple, and it does not work (by clicking buttons, the pages does not change).

So my about.htm looks like this (and this is the page people will visit): 

    <about-buttons selected="{{who}}">
    </about-buttons>

    <about-iron-pages attr-for-selected="name" selected="{{who}}" fallback-selection="who">   
        <about-us name="who">
        </about-us> 
        <about-manifesto name="manifesto">
        </about-manifesto>
        <about-team name="team">
        </about-team>    
    </about-iron-pages>

My about-buttons.htm looks like this:

            <iron-selector 
                attr-for-selected="name" 
                selected="{{buttonSelected}}" 
                fallback-selection="who" 
                class="f-column f-column_3 f-column_mobile_2">
                <button class="f-button-group__button" name="manifesto">Manifesto</button>
                <button class="f-button-group__button" name="who">Who we are</button>
                <button class="f-button-group__button" name="team">Team</button>
            </iron-selector>

With this script: 

<script>
  Polymer({
    is: 'about-buttons',
    properties: {
        buttonSelected: {
            type: String,
            notify: true,
            value: 'who'
        }
    }
  });
</script>

And here's my version of iron-pages: 

<dom-module id="about-iron-pages">
    <template>
        <style>
            :host {
                display: block;
            }
            :host > ::content > :not(.iron-selected) {
                display: none !important;
            }
        </style>
        <content>
        </content>
    </template>
    <script>
        Polymer({
          is: 'about-iron-pages',
          behaviors: [
            Polymer.IronResizableBehavior,
            Polymer.IronSelectableBehavior
          ],

          properties: {
            activateEvent: {
              type: String,
              value: null,
            }
          },
          observers: [
            '_selectedPageChanged(selected)'
          ],
          _selectedPageChanged: function(selected, old) {
            this.async(this.notifyResize);
          }
        });
    </script>
</dom-module>

Upvotes: 0

Views: 974

Answers (1)

tony19
tony19

Reputation: 138266

As already pointed out, your attribute in <about-buttons selected="..."> does not match the actual property name. For <about-buttons>.buttonSelected, your attribute should be button-selected, and that's the only change to your code needed to get the selector working (plunker):

<about-buttons button-selected="{{who}}" ...>

Perhaps there's more context to your need for <about-buttons> and <about-iron-pages>, but otherwise, if you're only trying to implement a tabbed view, you could just use Polymer's components. Specifically, <about-buttons> could be replaced by <paper-tabs> and <about-iron-pages> by <iron-pages> (plunker).

Upvotes: 0

Related Questions