使用Knockoutjs ObservableArray确定添加或删除了哪个元素

Question

我需要弄清楚从我的Knockout observableArray中删除了哪个元素.请看我的jsFiddle.

我可以订阅更改,但它只返回value,这是添加或删除后的当前数组.

self.selectedDataPointOptions.subscribe(function(value) {
  // how can I see which one was added or removed?
  alert(value);
});

Answer 1

Knockout包含ko.utils.compareArrays可用于比较一个阵列与另一个阵列的阵列.这是一个帮助函数,它通知数组中每个添加或删除的项:

ko.observableArray.fn.subscribeArrayChanged = function(addCallback, deleteCallback) {
    var previousValue = undefined;
    this.subscribe(function(_previousValue) {
        previousValue = _previousValue.slice(0);
    }, undefined, 'beforeChange');
    this.subscribe(function(latestValue) {
        var editScript = ko.utils.compareArrays(previousValue, latestValue);
        for (var i = 0, j = editScript.length; i < j; i++) {
            switch (editScript[i].status) {
                case "retained":
                    break;
                case "deleted":
                    if (deleteCallback)
                        deleteCallback(editScript[i].value);
                    break;
                case "added":
                    if (addCallback)
                        addCallback(editScript[i].value);
                    break;
            }
        }
        previousValue = undefined;
    });
};

它在行动:http://jsfiddle.net/mbest/Jq3ru/

从Knockout 3.0开始,您可以使用该arrayChange事件更轻松地完成此操作.更多信息请访问:http://blog.stevensanderson.com/2013/10/08/knockout-3-0-release-candidate-available/

Answer 2

建议的解决方案很酷,并且有效,但它涉及每次发生更改时克隆数组,然后进行比较,这可能是O(n ^ 2).

这是另一个解决方案:它意味着包含另一个js文件......但如果你想要一些更好的性能,这将提供它:

https://github.com/bobwold/betterObservableArray

observableArray(基本上只是一个可观察数组的克隆,带有一些额外的代码)的替换使用了淘汰订阅框架,并添加了"添加"和"删除"订阅.

样品用法:

var presidents = ko.betterObservableArray();
presidents.subscribe(presidentAdded, this, "add");
presidents.subscribe(this.presidentRemoved, this, "remove");

...

function presidentAdded(president) {
};

function presidentRemoved (president) {
};

...