Polymer 1.0 paper-tabs addEventListener 停止动态绑定标签

Question

我正在尝试非常基本的选项卡切换和选项卡内容。这是我的代码：

我构建的用于动态生成标签条的自定义元素

<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>

来自 index.html 我引用如下：

<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>

在我的自定义元素中添加以下代码片段之前，选项卡绑定良好：

<script>
  var pages = document.querySelector("#plantContent");
  var tabs = document.querySelector("paper-tabs");

  tabs.addEventListener('iron-select', function () {
    pages.selected = tabs.selected;
  });
</script>

但是当我删除 event listener 片段时，即

tabs.addEventListener('iron-select', function () {
  pages.selected = tabs.selected;
});

标签又回来了。

我指的是thispost。我的代码有什么问题？

提前致谢。

Answer 1

嗯，我会将您的代码重写为以下内容：

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>

您应该在您的 index.html 中也将属性命名为 selectedTab。现在发生的情况是，当您在 tab-generator.html 内更改 selectedTab 时，它会传播到 index.html 内的属性 selectedTab 并将更新 UI 因此。不需要 javascript。 :)

Polymer 1.0 paper-tabs addEventListener 停止动态绑定标签

Polymer 1.0 paper-tabs addEventListener stops binding tabs dynamically

polymer-1.0

paper-elements