每当 Knockout JS 中可观察的属性发生变化时执行一个函数

Question

我有一个演示 application，其中所有列表项都是可观察的。为了实现这一点，我在创建列表的数组上使用了映射插件。

this.allItems = ko.mapping.fromJS([
    {name:"Annabelle"},
    {name:"Vertie"},
    {name:"Charles"},
    {name:"John"}
]);

我的问题是 - 如何在 Knockout JS 中正确实现这种行为：每当可观察的属性（列表中的任何项目）发生更改时，都会执行排序函数：

    this.sortList = function() {
    this.allItems(this.allItems().sort(function(a, b) { return a.name() > b.name();}).slice(0, 2));
};

Answer 1

首先，您需要声明一个视图模型类。然后，将 allItems 声明为一个可观察数组，但向用户显示一个不同的成员，称为 sortedItems，它应该是一个计算字段。此计算字段将在内部使用 allItems，因此 KO 会注意到 allItems 何时更新并重新评估 sortedItems。

function AppViewModel() {
var self = this;

this.allItems = ko.observableArray([
    {name:"Annabelle"},
    {name:"Vertie"},
    {name:"Charles"},
    {name:"John"}
]);

    this.sortedItems = ko.computed(function() {
        return self.allItems().sort(sortFunction);
    }, this);
}