0
我正在使用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>
你是對的，謝謝@GünterZöchbauer –