更改现有项目的顺序时，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

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

在运行时，列表被排序
在数组中添加新项目时，它会在视图中正确显示（排序）
但是当现有项目的顺序值发生变化时，它在视图中没有正确调整（排序）

当现有项目的值发生变化时，如何让我的数组正确排序元素。

Answer 1

将`length`作为参数传递

Aurelia 观察值转换器和函数的所有参数。在这种情况下，即使数组发生了变化，它仍然是同一个数组，因此 Aurelia 不会重新计算。传递长度将导致它在数组发生变化时发生变化。

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

Answer 2

您可以使用 signal on the binding，每当您改变数组中的项目时 - 发出一个信号，绑定将再次启动。

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

SortValueConverter not working correctly when order of an existing item is changed

aurelia

将`length`作为参数传递

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

SortValueConverter not working correctly when order of an existing item is changed

aurelia

将length作为参数传递

将`length`作为参数传递