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

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

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>

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函数中完成您想对对象和数组所做的所有工作。

数组排序时，Dom-repeat不会重新呈现

2 个答案: