Polymer 1.0 paper-tabs addEventListener stops binding tabs dynamically

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. :)