Question

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

 <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上使用它们。 items中的iron-list属性不会通知对主机元素的更改。因此，即使内部可能已更改，也不会将更改传播到cnid-list。此外，您正在使用one-way data-bindings（items="[[listData]]"中的方括号），它也不会传达从子到主机的更改。

解决方案很简单，在cnid-list

上调用拼接

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

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

使用splice更新阵列正确但不显示从铁列表中删除项目

1 个答案: