CODEWITHSUNDEEP
javascriptmenupolymer
jdepypere
jdepypere

Reputation: 3553

Polymer selected value of core-menu by name

For navigation on my website I'd like to be able to select an item from the core-menu in Polymer. Here's some sample code I have made for testing: jsbin.

You can see in the example that I am able to retrieve the label-value of the selected item using this.selectedMenu.label, with selectedMenu being bound to the selectedItem={{selectedMenu}} of th core-menu.

I also demonstrate that it is possible to use the numeric value to change the state, using this.$.mainMenu.selected = x, x being a numeric value starting from 0.

Now I was wondering whether it is possible to update the selected value with the label name instead of numeric value.

Here's the code again:

    <polymer-element name='my-app' noscript>
      <template>
        <style>
          paper-item.core-selected {
            color: #99182c;
            fill: #99182c;
          }
        </style>
        <core-menu selected="0" selectedItem="{{selectedMenu}}" id="mainMenu" on-core-select="{{mainMenu}}">
          <paper-item icon="home" label="Home"></paper-item>
          <paper-item icon="today" label="Activities"></paper-item>
          <paper-item icon="account-box" label="People"></paper-item>
          <paper-item icon="theaters" label="Pictures"></paper-item>
          <paper-item icon="info" label="Info"></paper-item>
          <paper-item icon="lock" label="Login"></paper-item>  
        </core-menu>
        This is the selected item: {{selectedMenu.label}}.<br>
        <div on-tap="{{forceStateHome}}">Force state home</div>
      </template>
      <script>
        Polymer("my-app", {
          mainMenu: function(){
            console.log("New item selected: " + this.selectedMenu.label);
          },
          forceStateHome: function(){
            console.log("Forcing state to home...");
            this.$.mainMenu.selected = 0; //I want to use a name, not number
          }
        });
      </script>
    </polymer-element>

Upvotes: 0

Views: 3063

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

core-menu can use any attribute of the child elements for its selected value by setting the valueattr attribute (core-selector documentation).

I suggest to give each paper-item an id (say id='home') and set valueattr to valueattr='id'.

Then you can write this.$.mainMenu.selected = 'home'.

Upvotes: 3

Related Questions