Polymer 1.0 paper-tabs addEventListener stops binding tabs dynamically - polymer-1.0

Question

I am trying very basic tab switching and tab content. Here is my code:
A Custom element I built to generate Tab Strips dynamically
<dom-module id="tab-generator">
<template>
<paper-tabs selected="{{defaultindex}}" id="tabstrip">
<template is="dom-repeat" items="{{tabitems}}">
<paper-tab>{{item.name}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
(function () {
'use strict';
var pages = document.querySelector("#plantContent");
var tabs = this.$.tabstrip;
tabs.addEventListener('iron-select', function () {
pages.selected = tabs.selected;
});
Polymer({
is: 'tab-generator',
properties: {
tabitems: {
type: Array,
notify: true
},
defaultindex: {
type: String,
notify: true
}
}
});
})();
</script>
</dom-module>
From index.html I am referencing this as follows:
<paper-card heading="Dynamic Tabs">
<div class="card-content">
<tab-generator selected="0" tabitems='[{"name": "Plant Genus"}, {"name": "Plant Series"}, {"name": "Plant Species"}]'></tab-generator>
<!-- iron pages to associate tabs as contents -->
<iron-pages selected="0" id="plantContent">
<div>Content - Tab 1</div>
<div>Content - Tab 2</div>
<div>Content - Tab 3</div>
</iron-pages>
</div>
</paper-card>
Tabs bind fine before I added the following snippet in my custom element:
<script>
var pages = document.querySelector("#plantContent");
var tabs = document.querySelector("paper-tabs");
tabs.addEventListener('iron-select', function () {
pages.selected = tabs.selected;
});
</script>
But when I remove the event listener snippet i.e.
tabs.addEventListener('iron-select', function () {
pages.selected = tabs.selected;
});
tabs are back again.
I am referring to this post. What is wrong in my code?
Thanks in advance.

Answer 1

Hmm, I would re-write your code to the following:
tab-generator.html:
<dom-module id="tab-generator">
<template>
<paper-tabs selected="{{selectedTab}}">
<template is="dom-repeat" items="{{tabItems}}">
<paper-tab>{{item.name}}</paper-tab>
</template>
</paper-tabs>
</template>
<script>
Polymer({
is: 'tab-generator',
properties: {
tabItems: {
type: Array,
notify: true
},
selectedTab: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
index.html:
<paper-card heading="Dynamic Tabs">
<div class="card-content">
<tab-generator selected-tab="{{selectedTab}}" tab-items='[{"name": "Plant Genus"}, {"name": "Plant Series"}, {"name": "Plant Species"}]'></tab-generator>
<!-- iron pages to associate tabs as contents -->
<iron-pages selected="{{selectedTab}}" id="plantContent">
<div>Content - Tab 1</div>
<div>Content - Tab 2</div>
<div>Content - Tab 3</div>
</iron-pages>
</div>
</paper-card>
You should in your index.html also have property named selectedTab. What happens now is that, when you change selectedTab inside the tab-generator.html it is propogated to the property selectedTab inside index.html and will update the UI accordingly. No javascript is needed. :)