Dom-repeat 数组排序时不重新渲染

Question

我有一个数组属性:

arrayList: {
    type: Array,
    value:[
              {id:"1",candy:"Reeces"},
              {id:"1",candy:"M&M"},
              {id:"1",candy:"KitKat"},
              {id:"1",candy:"Twizzlers"}
          ]
}

和一个布尔值属性

forceRerender: {
    type: Boolean,
    value: false
}

我在 Dom 中调用它们-重复填充 HTML:

<template is="dom-repeat" as="candy" items="[[getCandyList(arrayList, forceRerender)]]">
    <div id="[[candy.id]]" class="candy-row" data="[[candy]]" on-tap="selectCandy">
</template>

selectCandy() 函数如下所示：

selectCandy(event) {
    let arr = this.arrayList;
    for(let j = 0, i = 0; j < arr.length; j++) {
        if(arr[j].select) {
            let temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
            i++;
        }
    }
    this.set('forceRerender', !this.forceRerender);
}

还有我的getter:

getCandyList(arr,forceRerender) {
    return arr;
}

我的 selectCandy() 有效地重新排列了 arrayList，但没有直观地更新 HTML 内容来表示这一点。我似乎无法弄清楚为什么。

我制作了一个单独的数组并用它来更改值。我制作了一个本地数组并将其推送并返回。我已经重写了事情完成的顺序。将各个部分分开多次以单独查看每个部分。

我已经在这里至少 3 个小时了，我迷路了。没有人能在这里向我解释我做错了什么吗？

Answer 1

我找到了解决方案：

getCandyList(arr,forceRerender) {
    let rowList = [];
    for(let j = 0, i = 0; j < arr.length; j++) {
        if(arr[j].select) {
            let temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
            i++;
        }
    }
    arr.forEach(function(object) {
        rowList.push(object);
    }.bind(this));
    return rowList;
}

和

selectCandy(event) {
    this.set('forceRerender', !this.forceRerender);
}

这里故事的寓意是在 get 函数中对对象和数组做所有你想做的事情。

Answer 2

下面这个例子可以给你一些启发。据我了解，您想向上移动（顶部）所选项目。

Demo

<template is="dom-repeat" items="[[getCandyList(arrayList, forceRerender)]]" as="candy">
    <paper-item on-tap="selectCandy"> <div id="[[candy.id]]" class="candy-row" data="[[candy]]"> [[candy.id]] - [[candy.candy]]</div>   
    </paper-item>
</template>

Js 可能看起来像：

selectCandy(e) {
      let temp = this.arrayList;
      //In order to observable change in dom-repeat
      this.set('arrayList', []); 
      temp.splice(e.model.index, 1);
      temp.unshift(e.model.candy); 
      this.set("arrayList",  temp);

      this.set('forceRerender', !this.forceRerender);
}

您可以用其他类型重新组织数组。

Dom-repeat 数组排序时不重新渲染

Dom-repeat not re-rendering when Array sorts

polymer-2.x