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

我想在视图中列出数组的内容。这必须分类。下面是我的第一个实现

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

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

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

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

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

app.html:

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

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

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

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

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

app.html:

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

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

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

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

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

在这个实现中，更改蓝色元素的顺序后，排序不起作用

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

当现有项的值发生更改时，如何让数组正确排序元素。

将

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

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

您可以使用，并且无论何时更改数组中的项-发出信号，绑定将再次启动。
仍然：更改数组中元素的属性不会重新触发排序。这是正确的，但不是常见的用例。信号增加了很多复杂性和开销，而在10种情况中，有9种情况是不需要的。你是对的。谢谢我更新了我的GistRun：