Polymer 1.x：从铁名单中删除一项_Polymer_Polymer 1.0

Polymer 1.x：从铁名单中删除一项

polymer

Polymer 1.x：从铁名单中删除一项,polymer,polymer-1.0,Polymer,Polymer 1.0,我正在尝试使用以下代码从铁名单中删除一个项目 my-element.html <iron-list id="list" items="[[items]]" as="item" selected-items="{{selectedItems}}" selection-enabled multi-selection> <template> <my-item item="[[item]]" on-tap="_onIt

我正在尝试使用以下代码从铁名单中删除一个项目

my-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);
}

// 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');

预期行为点击列表项列表项消失选择下一个列表项选择下一个列表项实际行为点击列表项列表项不会消失选择相同的列表项，即先前打算删除的列表项实际上选择了下一个列表项，即索引偏移量为1 问题什么代码将导致期望的/预期的行为？请提供一个工作jsBin示例。建议：

问题回复 document.querySelector'tobuy'。推送'items'，{name:Foo}

那么你就不需要调用resize了

参考：

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>

然而，这种解决方案的一个问题是，它从铁名单中删除最后一项，而不是预期索引中的项。换句话说，它的行为就像人们期望的那样。items.pop

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

console.log

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>

这里的问题是由于my item.html文件正在设置和显示项目外部的属性。所有物所以，当铁表.this.splice'items'，e.model.index，1；调用数组变异方法时，未从DOM中删除非项属性

例如：

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);

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

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