Dom-repeat не перерисовывает при сортировке Array

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

И мойgetter:

getCandyList(arr,forceRerender) {
    return arr;
}

My selectCandy() эффективно переставляет arrayList, но визуально не обновляет содержимое HTML, чтобы представить это.Кажется, я не могу понять, почему.

Я создал отдельный массив и использовал его для изменения значений.Я сделал локальный массив и подтолкнул к нему и вернул его.Я переписал порядок, в котором все сделано.Разделил разделы вверх несколько раз, чтобы просмотреть каждую часть в отдельности.

Я занимался этим по крайней мере 3 часа, и я потерян.Не может ли кто-нибудь объяснить мне, что я делаю не так?

Answer 1

Этот пример может дать вам некоторое вдохновение.Насколько я понял, вы хотите переместить (вверх) выбранный элемент.

Демо

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

И J могут выглядеть следующим образом:

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

Вы можете реорганизовать массив с другими типами.

Answer 2

Я нашел решение:

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.