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

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: 'Yellow' }
    ];
    get allItems() {
      return this.items;
    }
    addElement() {
        var elm = { index: 4,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元素的顺序后排序无法正常工作。

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

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