在 Polymer 中定位元素 dom-repeat

Question

我正在使用 Polymer 1.0，我正在尝试从以下模板中的脚本访问 items。

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

简而言之，如何定位“#slide_n#item_m”？该路径不适用于查询选择器。为了完整性 #slide_n 确实有效，但它有一个 #document_fragment child 所以它没有用......对吧？

<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>

Answer 1

Polymer 提供 this$.someId shorthand 来访问元素本地 DOM 中的元素，但这不适用于动态创建的元素（例如在 template="dom-if" 或 template="dom-repeat" 或 appendNode(), ... 对于动态创建的节点，请改用 Polymer.dom(this.root).querySelectorAll(selector)。

在 Polymer 中定位元素 dom-repeat

Locating elements inside Polymer dom-repeat

javascript

web-component

polymer