聚合物：如何访问集合中的单个项目

我正在创建一个聚合物元素，该元素显示用于选择不同div的下拉菜单，我们将其称为此处的分区。在下拉菜单中选择一个项目时，相应的部分应该显示出来。你可以考虑这更像一个选项卡控件，而不是一个标签页头，我们有一个下拉控件。我想像段[0]以及第[1]与相应的JSON对象中的每个部分，但使用索引绑定不工作聚合物：如何访问集合中的单个项目

<polymer-element name="my-elem"> 
<template> 
    <div class="sections"> 
      <select on-change="{{sectionChanged}}"> 
       <template repeat="{{ sections }}"> 
        <option>{{ name }}</option> 
       </template> 
      </select> 

      <div id="section_0" class="section-config" bind="{{ sections[0] }}"> 
       <div>{{ sec0Prop }}</div> 
       Just for simplicity I am showing only one div here. This div can actually be quite complex 
      </div> 

      <div id="section_1" class="section-config" bind="{{ sections[1] }}"> 
       <div>{{ sec1Prop }}</div> 
       This section view will be different than that of section 0 
    </div> 

     </div> 
    </div> 
</template> 

<script> 
    Polymer('my-elem', { 
     sections: [{ sec0Prop: 'I am section 1 property' }, { sec1Prop: 'I am section 2 property' }], 
     showSection: function(index) { 
      $(this.shadowRoot.querySelectorAll('.section-config')).hide(); 
      $(this.shadowRoot.querySelector('#section_' + index)).show(); 
     }, 
     sectionChanged: function(e) { 
      this.showSection(e.target.selectedIndex); 
     } 
    }); 
</script> 
</polymer-element>

假设使用jquery的。如果我们无法在模板中使用重复模式，因为每个项目的视图都不同，您可以请帮助我如何绑定到集合中的单个项目吗？

来源

2015-04-07 Souvik Basu

您有编号。所以获得物品的最佳方式是：$ ['section_'+ index]。为什么你不使用'核心页面'？有了'核心页面'，你可以做到没有JS。

来源

2015-04-07 10:35:16

聚合物：如何访问集合中的单个项目

回答

相关问题