polymer-2.x

Dom-repeat not re-rendering when Array sorts


I have an array property:

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

and a boolean property

forceRerender: {
    type: Boolean,
    value: false
}

I call them in a Dom-Repeat to populate the HTML:

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

The selectCandy() function looks like this:

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

And my getter:

getCandyList(arr,forceRerender) {
    return arr;
}

My selectCandy() effectively rearranges the arrayList, but does not visually update the HTML content to represent this. I can't seem to figure out why.

I've made a separate array and used that to change values. I've made a local array and pushed to that and returned it. I've rewritten the order in which things are done. Separated the sections up multiple times to review each portion individually.

I've been at this for at least 3 hours and I'm lost. Can't anyone explain to me here what I'm doing wrong?


Solution

  • I have discovered the solution:

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

    and

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

    moral of the story here is do all the stuff you wanna do to your objects and arrays in the get function.