在 Polymer 中,如何使用带有值的 <template is="dom-repeat"> 和一个删除自身的按钮来制作元素列表?
in Polymer how do I make a list of elements using <template is="dom-repeat"> with values and a button to delete itself?
我用来在纸卡上显示数组中的每个对象。但我也希望能够在每个对象旁边都有一个纸按钮,一旦您按下它,它就会从数组中删除该对象。 (这一切都在自定义元素中)我无法使用以下代码实现此目的:
我的-element.js:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="deleteItem">delete</paper-button></div>
</paper-card>
</template>
deleteItem(o) {
const item = o.model.item;
this.tafels = this.tafels.filter(function(e) {
return e !== item;
});
}
我也试过使用这样的匿名内联函数:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="(function(){console.log('deleted')})();">delete</paper-button></div>
</paper-card>
</template>
但这也没有用。我做错了什么或者这些不是实现我正在寻找的东西的有效选择?
您尝试比较元素,这通常不是最佳做法。
尝试根据唯一 id/number 删除它们,例如:
<paper-button on-click="deleteItem" unique-id=[[item.id]]>delete</paper-button>
deleteItem(o) {
this.tafels = this.tafels.filter(function(e) {
return e.uniqueId !== o.currentElement.uniqueId;
});
}
此外,您似乎使用 'items' 作为 dom-repeat 的输入,而在编辑时使用 'tafels'。这两个应该是一样的。
我用来在纸卡上显示数组中的每个对象。但我也希望能够在每个对象旁边都有一个纸按钮,一旦您按下它,它就会从数组中删除该对象。 (这一切都在自定义元素中)我无法使用以下代码实现此目的:
我的-element.js:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="deleteItem">delete</paper-button></div>
</paper-card>
</template>
deleteItem(o) {
const item = o.model.item;
this.tafels = this.tafels.filter(function(e) {
return e !== item;
});
}
我也试过使用这样的匿名内联函数:
<template is="dom-repeat" items="{{items}}" as="item">
<paper-card>
<div>Item [[item.number]]
<paper-button on-click="(function(){console.log('deleted')})();">delete</paper-button></div>
</paper-card>
</template>
但这也没有用。我做错了什么或者这些不是实现我正在寻找的东西的有效选择?
您尝试比较元素,这通常不是最佳做法。 尝试根据唯一 id/number 删除它们,例如:
<paper-button on-click="deleteItem" unique-id=[[item.id]]>delete</paper-button>
deleteItem(o) {
this.tafels = this.tafels.filter(function(e) {
return e.uniqueId !== o.currentElement.uniqueId;
});
}
此外,您似乎使用 'items' 作为 dom-repeat 的输入,而在编辑时使用 'tafels'。这两个应该是一样的。