使用拼接更新数组从iron-list中正确删除项目，但不显示

Question

我有一个自定义元素，它包含了一个iron-list。每个列表项都会格式化并显示一个对象，并且每个列表项都有一个用于删除该项的可单击<div>。列表显示正确。我在我的“on- click”方法中收到了click事件。“on-click”方法使用splice删除该项。在我的代码中可以看到，我在拼接之前和之后记录了listData属性(my items)。当我删除任何项目时，listData会正确更新。但是，删除的项目仍然显示，并且列表末尾的项目实际上是从显示中删除的，而不是所需的。我已经尝试了一些我已经看到的东西(不是很多)，包括一些聚合物文档中的东西，但没有成功。有人能帮帮忙吗？这就是元素，去掉了很多的“绒毛”。

 <dom-module id="cnid-list">

  <template>

    <style include="cnid-list-style"></style>


    <iron-list id="callerList" items="[[listData]]" as="item">
      <template>
        <div class="recents-list">
        <div id="{{index2id(item.index)}}" on-click="onClickedItem"></div>
        </div>
      </template>
    </iron-list>

  </template>

  <script>
    Polymer({
        is: 'cnid-list',
        properties: {
          carrier: String,
          listData: { type: Array, 
                      value: function() { return []; }
                    }
        },

         ready: function() {
           console.log('cnid-list ready');
           myArray = getMyArray(); // returns an array of objects
           this.listData=myArray;

           for(var i = 0; i < this.listData.length; i++) {
               this.listData[i].index = i;
             }
         },

         index2id: function(index) {
             return "_" + index;
         },

         id2index: function(id) {
           return Number(id.substr(1));
         },

         onClickedItem: function(e) {
           for(var i = 0; i < this.listData.length; i++) {
             console.log('on-click list item before: ', this.listData[i]);
           }

           idx = this.id2index(e.target.getAttribute('id'));
           console.log('index is ' + idx);

           Polymer.dom(this.root).querySelector('#callerList').splice('items', idx, 1);
           for(var i = 0; i < this.listData.length; i++) {
             console.log('on-click list item after: ', this.listData[i]);
           }
        }
    });
  </script>
 </dom-module>

Answer 1

这是一个有趣的问题，Günter的评论为你指明了正确的方向。实际上，您使用的是数组变异方法的he链接。但是您是在iron-list上使用它们，而不是在您自己的自定义元素cnid-list上。iron-list中的items属性不会通知对主体图元的修改。因此，即使它可能在内部发生了更改，它也不会将更改传播到cnid-list。此外，您使用的是one-way data-bindings (items="[[listData]]"中的方括号)，它也不会将更改从子进程传递到主机。

解决方案非常简单，在cnid-list上调用splice

this.splice('listData', idx, 1);

请注意，在您的ready函数中，还应该使用Polymer来设置索引。