使用拼接更新数组正确但不显示从铁列表中删除项目

Question

我有一个包含铁列表的自定义元素。每个列表项格式化并显示一个对象，每个项目都有一个可单击的<div>，用于删除该项目。列表显示正确。我在“点击”方法中收到点击事件。 'on-click' 方法使用拼接来移除项目。从我的代码中可以看出，我在拼接前后记录了 listData 属性（我的项目）。当我删除任何项目时，listData 会正确更新。但是，已移除的项目仍会显示，并且列表末尾的项目实际上已从显示中移除，而不是所需的项目。我尝试了一些我见过的东西（不多），包括 Polymer 文档中的一些东西，但没有运气。有人可以帮忙吗？这是元素，减去了很多“绒毛”。

 <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 的评论为您指明了正确的方向。您实际上正在使用他链接到的数组变异方法。但是您在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 API 来设置索引。