聚合物1.0紙張選項卡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; 
 
});

選項卡又回來了。

我指的是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。現在發生的是，當您在tab-generator.html內更改selectedTab時，它會被傳播到index.html內的屬性selectedTab，並會相應地更新用戶界面。不需要JavaScript。 :)