Search code examples
dartdart-polymerpaper-elements

Set selected of Paper-Tabs

I am trying to select a paper-tab based on it's data-id attribute. I have the element but I cannot changed to selected property of the inner_tabview.

I have a Polymer:

<paper-tabs id="inner_tabview" noink="true">
    <template repeat="{{item in tabNames}}">
        <paper-tab data-id="{{item['id']}}"><h3>{{item['name']}}</h3></paper-tab>
    </template>
</paper-tabs>

And some Dart code behind it:

selectTab(itemId) {     
    PaperTab item = shadowRoot.querySelector("paper-tab[data-id='" + itemId + "']");
    print('Selecting: ' + itemId + ', text:' + item.text);

    PaperTabs tabView = shadowRoot.querySelector('#inner_tabview');
    tabView.selected = item; // This doesn't work
}

Changing the selected using an integer (index) works, but I don't know what the index should be.

Only thing I can currently think of is finding all paper-tab elements and get the index of the correct element in that List. But that sounds a bit silly to do so.

Any other way?

Solution

  • I don't know why querySelector doesn't work but selected expects an index by default not an element.

    if you specify the valueattr attribute you can use other attributes than the index.

    <paper-tabs id="inner_tabview" noink="true" valueattr="data-id">
    <template repeat="{{item in tabNames}}">
        <paper-tab data-id="{{item['id']}}"><h3>{{item['name']}}</h3></paper-tab>
    </template>
</paper-tabs>

    then 

    tabView.selected = itemId;

    should work as well