javascript - 在 knockout 计算访问器上订阅 arrayChange

Question

我有一种情况，我需要监听计算的数组更改，该计算只是返回可观察值的过滤值。 但是，我确实需要完整的更改列表，就像 .subscribe(function(changes){},null,'arrayChange') 在 observableArray 上所做的那样。

我的理解是，arrayChange在计算值的情况下不起作用，因为它可能重新创建一个新数组，因此列表没有特定的更改。

参见http://jsfiddle.net/darknessm0404/A6D8u/1/获取完整示例。

// The following does not work, but I'd like it
computedTest.subscribe(function(changesList){
    console.log('COMPUTED subscription : arrayChange');
}, null, 'arrayChange');

我似乎实现我想要的目标的唯一方法是创建另一个可观察数组，该数组将根据更改进行推送/删除，因此我能够使“arrayChange”方法起作用。

我的想法的完整示例:

this.events.listFiltered = ko.observableArray().extend({ rateLimit: 0 });
this.events.listFiltered_Worker = ko.computed(function () {
    var listFiltered = me.events.listFiltered();

    ko.utils.arrayForEach(me.events.list(), function (item) {
            index = listFiltered.indexOf(item);
        if (FILTERING_CASE_HERE) {
            if (index < 0) {
                listFiltered.push(item);
            }
        } else if (index >= 0) { // Delete
            listFiltered.splice(index, 1);
        }
    });
    return ko.utils.arrayFilter(me.events.list(), function (item) {
        return !(item.end().isBefore(filterStart) || item.start().isAfter(filterEnd));
    });
    return __rd++;
}).extend({ rateLimit: 0 });
this.events.listFiltered.subscribe(function () {
    debug('inside subscribe');
    debugger;
}, null, 'arrayChange');

但是我想知道是否有更简单的解决方案来解决这个问题？

Answer 1

Knockout 支持任何可观察的 arrayChange，您必须专门启用它。

var computedTest = ko.computed(function() {  
    ...
}).extend({trackArrayChanges: true});

http://jsfiddle.net/mbest/A6D8u/2/

如果你查看 Knockout 源代码，this is what's done自动用于可观察数组。

如果这是您项目中的常见场景，您可以创建一个包装函数来执行此操作:

function computedArray() {
    return ko.computed.apply(ko, arguments).extend({trackArrayChanges: true});
}