如何在每个 dom-repeat 元素上调用函数
How to Call Function on Each dom-repeat Element
我正在尝试对 dom-repeat
模板中的每个元素调用一个函数。
<dom-repeat items="[[cart]]" as="entry">
<template>
<shop-cart-item id="item"></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus() {
this.$.item.doSomething();
}
如何在每个元素上调用 doSomething
?
您可以像这样遍历节点:
checkStatus() {
const forEach = f => x => Array.prototype.forEach.call(x, f);
forEach((item) => {
if(item.id == 'cartItem') {
console.log(item);
item.doSomething(); // call function on item
}
})(this.$.cartItems.childNodes)
}
您可以在循环中添加一个 on-tap
事件。为了观察您点击了哪个项目,请查看 model
属性 :
<dom-repeat items="[[cart]]" as="entry">
<template>
<!-- need to give dynamic id for each item in dome-repeat -->
<shop-cart-item id="[[index]]" on-tap = 'checkStatus'></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus(status) {
console.log(status.model) // you can get index number or entry's properties.
this.$.item.doSomething();
}
编辑:
所以根据@Matthew 的评论,如果需要在 dom-repeat
中的一个元素函数中调用一个函数,首先给出一个动态 id name
,然后:
checkStatus(status) {
this.shadowRoot.querySelector('#'+ status.model.index).doSomething();
}
我正在尝试对 dom-repeat
模板中的每个元素调用一个函数。
<dom-repeat items="[[cart]]" as="entry">
<template>
<shop-cart-item id="item"></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus() {
this.$.item.doSomething();
}
如何在每个元素上调用 doSomething
?
您可以像这样遍历节点:
checkStatus() {
const forEach = f => x => Array.prototype.forEach.call(x, f);
forEach((item) => {
if(item.id == 'cartItem') {
console.log(item);
item.doSomething(); // call function on item
}
})(this.$.cartItems.childNodes)
}
您可以在循环中添加一个 on-tap
事件。为了观察您点击了哪个项目,请查看 model
属性 :
<dom-repeat items="[[cart]]" as="entry">
<template>
<!-- need to give dynamic id for each item in dome-repeat -->
<shop-cart-item id="[[index]]" on-tap = 'checkStatus'></shop-cart-item>
</template>
</dom-repeat>
...
checkStatus(status) {
console.log(status.model) // you can get index number or entry's properties.
this.$.item.doSomething();
}
编辑:
所以根据@Matthew 的评论,如果需要在 dom-repeat
中的一个元素函数中调用一个函数,首先给出一个动态 id name
,然后:
checkStatus(status) {
this.shadowRoot.querySelector('#'+ status.model.index).doSomething();
}