[SortValueConverter在更改现有项目的顺序时无法正常工作

Question

我想在我的视图中列出数组的内容。必须对此进行排序。下面是我的第一个实现。

app.js：

export class App {

    items: Array = [
        { order: 2, color: 'Red' },
        { order: 5, color: 'Green' },
        { order: 1, color: 'Blue' },
        { order: 4, color: 'Yellow' }
    ];
    get sortedItems() {
        var elms = this.items.slice(0);
        return elms.sort(function (a, b) {
            return a.order - b.order;
        });
    }
    addElement() {
        var elm = { index: 4, order: 3, color: 'Brown' };
        this.items.push(elm);
    }
    changeElement() {
        var elm = this.items.find(x => x.color == 'Blue');
        elm.order = 7;
    }
}

app.html：

<template>  

  <ul>
    <li repeat.for="item of sortedItems">
      ${item.order} - ${item.color}
    </li>
  </ul>

  <button click.trigger='addElement()'>Add</button>
  <button click.trigger='changeElement()'>Change</button>

</template>

https://gist.run/?id=fadff61b1159fd1d4dcfaf1ed4c4990e

它按预期工作。

• 在运行时，列表已排序
• 当在数组中添加新项目时，它会在视图中正确显示（排序）
• 当更改现有项目的订单值时，将在视图中对其进行正确调整（排序）

但是现在我想使用ValueConverter对列表进行排序。所以下面是我的第二个实现。

app.js：

export class App {

    items: Array = [
        { order: 2, color: 'Red' },
        { order: 5, color: 'Green' },
        { order: 1, color: 'Blue' },
        { order: 4, color: 'Yellow' }
    ];
    get allItems() {
      return this.items;
    }
    addElement() {
        var elm = { index: 4, order: 3, color: 'Brown' };
        this.items.push(elm);
    }
    changeElement() {
        var elm = this.items.find(x => x.color == 'Blue');
        elm.order = 7;
    }
}

app.html：

<template>

  <require from="./sort"></require>

  <ul>
    <li repeat.for="item of allItems | sort:'order':'ascending'">
      ${item.order} - ${item.color}
    </li>
  </ul>

  <button click.trigger='addElement()'>Add</button>
  <button click.trigger='changeElement()'>Change</button>

</template>

sort.js：

export class SortValueConverter {
  toView(array, propertyName, direction) {
    let factor = direction === "ascending" ? 1 : -1;
    return array.sort((a, b) => {
      return (a[propertyName] - b[propertyName]) * factor;
    });
  }
}

https://gist.run/?id=06f97d4b12b43c2fd3d727fb49edd1c0

使用此实现，在更改Blue元素的顺序后，排序不起作用。

• 在运行时，列表已排序
• 当在数组中添加新项目时，它会在视图中正确显示（排序）
• 但是，当更改现有项目的订单值时，在视图中未正确调整（排序）

当更改现有项目的值时，如何继续使数组正确地对元素进行排序。

Answer 1

通过length作为参数

Aurelia遵守值转换器和函数的所有参数。在这种情况下，即使数组发生突变，它仍然是同一数组，因此Aurelia不会重新计算。传递长度会使数组发生突变时改变长度。

repeat.for="item of allItems | sort:'order':'ascending':allItems.length"

Answer 2

您可以使用signal on the binding，并且只要您对数组中的项目进行突变-都会发出信号，绑定将再次开始。