聚合物1.0纸张选项卡addEventListener动态地停止绑定选项卡

我正在尝试非常基本的选项卡切换和选项卡内容。这里是我的代码：聚合物1.0纸张选项卡addEventListener动态地停止绑定选项卡

我建产生的页框动态

<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后。我的代码有什么问题？

在此先感谢。

来源

2015-11-07 Subrata Sarkar

嗯，我想你的代码重新写为以下：

制表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。 :)

来源

2015-11-07 17:52:42 Whyser

聚合物1.0纸张选项卡addEventListener动态地停止绑定选项卡

回答

相关问题