Polymer 2.x 数组排序时Dom重复不重新渲染

我有一个数组属性：

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

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

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

getCandyList(arr,forceRerender) {
    return arr;
}

和布尔属性

forceRerender: {
    type: Boolean,
    value: false
}

我在Dom Repeat中调用它们以填充HTML:

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

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

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

getCandyList(arr,forceRerender) {
    return arr;
}

和我的getter:

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

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

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

getCandyList(arr,forceRerender) {
    return arr;
}

My

selectCandy（）

有效地重新排列了

arrayList

，但不会直观地更新HTML内容来表示这一点。我似乎不明白为什么

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

---

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

我找到了解决办法：

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

---

这个故事的寓意是在get函数中对对象和数组执行所有您想执行的操作。

下面的示例可能会给您一些启发。据我所知，您希望向上（顶部）移动所选项目

您可以使用其他类型重新组织阵列