当Array排序时，Dom-repeat不会重新渲染

Posted 2021-03-26

我有一个数组属性：

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-Repeat中调用它们来填充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);
}

而我的吸气鬼：

getCandyList(arr,forceRerender) {
    return arr;
}

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

我已经制作了一个单独的数组并用它来改变数值。我已经制作了一个本地数组并推送到那个并返回它。我已经改写了完成任务的顺序。将这些部分分开多次以分别查看每个部分。

我已经在这里待了至少3个小时而且我迷路了。谁也不能在这里向我解释我做错了什么？

答案

以下示例可以为您提供一些灵感。据我所知，你想向上移动（顶部）所选项目。

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

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

另一答案

我发现了解决方案：

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函数中的对象和数组做的所有事情。