在 Polymer 中，如何使用带有值的 <template is="dom-repeat"> 和一个删除自身的按钮来制作元素列表？

Question

我用来在纸卡上显示数组中的每个对象。但我也希望能够在每个对象旁边都有一个纸按钮，一旦您按下它，它就会从数组中删除该对象。（这一切都在自定义元素中）我无法使用以下代码实现此目的：

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

但这也没有用。我做错了什么或者这些不是实现我正在寻找的东西的有效选择？

Answer 1

您尝试比较元素，这通常不是最佳做法。尝试根据唯一 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'。这两个应该是一样的。

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

javascript

html

polymer

dom-repeat