Polymer 1.0 paper-tabs addEventListener动态停止绑定选项卡

Question

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

我构建的自定义元素，用于动态生成Tab Strips

SetControlCursor(WizardForm, crDefault);  

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

标签又回来了。

我指的是this帖子。我的代码出了什么问题？

提前致谢。

Answer 1

嗯，我会把你的代码改写成以下内容：

标签-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的媒体资源。现在发生的情况是，当您在selectedTab内更改tab-generator.html时，它会传播到selectedTab内的属性index.html，并会相应地更新用户界面。不需要JavaScript。 ：）