在聚合物dom-repeat中定位元素

我正在使用Polymer 1.0，并且正在尝试从以下模板中的脚本访问items。在聚合物dom-repeat中定位元素

我花了一段时间，我只是无法从这个模板的范围中弄清楚如何访问'my-swiper-icon'元素。

总之，如何找到“#slide_n #item_m”？该路径不适用于查询选择器。为了完整性#slide_n可以工作，但它有一个#document_fragment子元素，所以它没有用......对吧？

<dom-module id="my-swiper"> 
    <template> 
    <style include="my-swiper-import"> 
     :host { 
     display: block; 
     } 
    </style> 

    <!-- Swiper --> 
    <div class="swiper-container"> 
     <div class="swiper-wrapper"> 
      <template id="slides_template" is="dom-repeat" items="{{slides}}"> 
      <div class="swiper-slide" id="slide_{{index}}"> 
       <div> 
       <template id="items_template" is="dom-repeat" items="{{item.items}}"> 
        <my-swiper-icon id="item_{{index}}" data="{{item}}"/> 
       </template> 
       <div> 
      </div> 
      </template> 
     </div> 
     <!-- Add Pagination --> 
     <div class="swiper-pagination"></div> 
     <!-- Add Arrows --> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
    </div> 

    </template> 
    <script> 
    (function() { 
     'use strict'; 

     Polymer({ 
     is: "my-swiper", 

     properties: { 
      slides: { 
      type: Array, 
      value: [], 
      notify: true, 
      observer: '_slidesChanged' 
      } 
     }, 

     listeners: { 
      'tap': '__tap', 
      'resize': '__resized' 
     }, 

     __tap: function(e) {  
      // 
     }, 

     __resized: function(e) { 
      // How do I locate "#slide_n #item_m" ???? 
     }, 

     _slidesChanged: function(newValue, oldValue) { 
      // 
     }, 

     ready: function() { 
      this.slides = [     
      { 
       items: [ 
       { hash: 'foobar' }, 
       { hash: 'foobar' }, 
       { hash: 'foobar' }, 
       { hash: 'foobar' } 
       ] 
      }, 
      { 
       items: [ 
       { hash: 'barfoo' }, 
       { hash: 'barfoo' } 
       ] 
      } 
      ]; 
     }, 

     attached: function() { 
      this.async(function() { 
      var swiper = new Swiper('.swiper-container', { 
       pagination: '.swiper-pagination', 
       paginationClickable: '.swiper-pagination', 
       nextButton: '.swiper-button-next', 
       prevButton: '.swiper-button-prev', 
       spaceBetween: 30, 
       hashnav: true 
      }); 
      this.__resized(null); 
      window.addEventListener("resize", this.__resized.bind(this)); 
      }); 
     } 

     }); 

    })(); 
    </script> 

</dom-module>

来源

2016-02-05 Billy Back Bedroom

你是对的，谢谢@GünterZöchbauer –

聚合物提供this$.someId速记访问一个元素的本地DOM元素，但这并不用于动态创建的元素内template="dom-if"或template="dom-repeat"或appendNode()工作（例如，... 对于动态创建的节点用Polymer.dom(this.root).querySelectorAll(selector)代替

来源

2016-02-05 09:47:30

在聚合物dom-repeat中定位元素

回答

相关问题