2015-04-07 4 views
0

Я создаю полимерный элемент, который показывает выпадающий список для выбора другого div, который мы называем здесь. При выборе элемента в раскрывающемся списке должен появиться соответствующий раздел. Вы можете рассматривать это скорее как элемент управления вкладкой, где вместо заголовка вкладки мы имеем выпадающий элемент управления. Я хочу, чтобы связать каждый раздел с соответствующим объектом JSon, но с использованием индекса, как секций [0] и секции [1] не работаетPolymer: Как получить доступ к отдельным элементам в коллекции

<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. Не могли бы вы помочь мне связать отдельные элементы в коллекции, если мы не можем использовать повтор в шаблоне, поскольку представление для каждого элемента отличается?

ответ

0

У вас есть id. Итак, лучший способ получить элемент: это. $ ['Section_' + index]. Почему вы не используете «основные страницы»? С «основными страницами» вы можете сделать это без js.

Смежные вопросы