Polymer 1.x：从 iron-list 中删除一个项目

Question

我正在尝试使用以下代码从 iron-list 中删除一个项目。

我的-element.html

<iron-list id="list" items="[[items]]" as="item"
           selected-items="{{selectedItems}}"
           selection-enabled multi-selection>
  <template>
    <my-item item="[[item]]" on-tap="_onItemTap"></my-item>
  </template>
</iron-list>
...
_onItemTap: function(e) {
  this.items.splice(e.model.index, 1);
}

预期行为

点击列表项
列表项消失
Select 下一个列表项
已选择下一个列表项

实际行为

点击列表项
列表项没有消失
Select 相同列表项（即之前打算删除的项）
下一个列表项实际被选中（即索引偏移一）

问题

什么代码会导致期望的/预期的行为？
请提供一个有效的 jsBin 示例。

Answer 1

A summary of this page suggests this documentation as follows:

题

app.removeItem = function(index) {
  app.data.splice(index, 1);
  console.log("Removing " + index);
  document.querySelector('#tobuy').fire('resize');
};

document.querySelector('#tobuy').push('items', {name: "Foo"})

then you don't need to call resize.

ref: https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

Answer 2

This documentation on array mutation provides the following boilerplate code:

custom-element.html

<dom-module id="custom-element">
  <template>
    <template is="dom-repeat"></template>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      addUser: function(user) {
        this.push('users', user);
      },
      removeUser: function(user) {
        var index = this.users.indexOf(user);
        this.splice('users', index, 1);
      }
    });
  </script>
</dom-module>

将其应用于此案例：

my-element.html

// As a syntactical matter, replace the following line
// this.items.splice(e.model.index, 1);
// With this line
this.splice('items', e.model.index, 1);
this.$.list.fire('resize');

但是，此解决方案的一个问题是它删除了 iron-list 中的最后一项，而不是预期索引处的项目。换句话说，它的行为就像人们期望的那样 this.items.pop().

它还会抛出以下奇怪的错误消息：

console.log

Uncaught TypeError: <item> should be a valid item

Answer 3

.

Here is a working JSBin.

http://jsbin.com/qefemoloxi/1/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
  <link href="iron-list/iron-list.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    iron-list {
      height: 100vh;
    }
  </style>
  <iron-list id="list" items="[[items]]" as="item">
    <template>
      <paper-button on-tap="_deleteItem">[[item.name]]</paper-button>
    </template>
  </iron-list>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        items: {
          type: Array,
          value: function() {
            return [
              { 'name':'foo' },
              { 'name':'bar' },
              { 'name':'qux' },
              { 'name':'baz' },
              { 'name':'quux'}
            ]
          }
        }
      },
      _deleteItem: function(e) {
        console.log(e.model.index);
        this.splice('items', e.model.index, 1);
        this.$.list.fire('resize');
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

Answer 4

.

这里的问题是由于我的 item.html 文件在 item. 属性之外设置和显示属性造成的。因此，当调用 iron-list.(this.)splice('items', e.model.index, 1); 数组变异方法时，不会从 DOM.

中删除非 item 属性

示例：

my-list-item.html

this.set(     'name', this.item.foo.bar.qux); // This syntax caused the problem
this.set('item.name', this.item.foo.bar.qux); // This fixed the problem

my-iron-list.html

this.splice('items', e.model.index, 1);

Polymer 1.x：从 iron-list 中删除一个项目

Polymer 1.x: Deleting an item from iron-list

polymer

polymer-1.0

预期行为

实际行为

问题