如何在Knockout中创建计算的可观察数组

Mat*_*old 41 ko.observablearray knockout.js computed-observable

我想知道如何创建一个计算的可观察数组.

在我的视图模型中,我有2个可观察数组,我希望有一个计算的可观察数组,它只是两个数组的组合.

function ViewModel() {
    var self = this;
    self.listA= ko.observableArray([]);
    self.listB = ko.observableArray([]);
    self.masterList= //combine both list A and B
Run Code Online (Sandbox Code Playgroud)

Bri*_*n S 33

这将组合两个数组并返回组合列表.但是,它不是一个计算的可观察数组(不知道是否可能),而是一个常规的计算可观察数组.

self.masterList = ko.computed(function() {
    return this.listA().concat(this.listB());
}, this);
Run Code Online (Sandbox Code Playgroud)

  • 我相信这个答案对于大多数用例都是有缺陷的:计算的observable的值是一个常规数组,而不是一个可观察的数组(在答案中大致说明).因此,更新`listA`或`listB`将完全替换数组本身而不是更新其内容(这是99%的情况下我们想要的).**这意味着您不应该将视图绑定到此可观察对象.**实际上,此代码与其非计算变体一样有用.有关不同方法,请参阅其他答案 (20认同)

tne*_*tne 13

self.masterList = ko.observableArray();
ko.computed(function () {
    self.masterList(self.listA().concat(self.listB()));
});
Run Code Online (Sandbox Code Playgroud)

类似于Joe Flateau的精神回答,但我喜欢认为这种方法更简单.


Joe*_*eau 9

我知道这是一个老问题,但我想我会把答案放在那里:

var u = ko.utils.unwrapObservable;

ko.observableArray.fn.filter = function (predicate) {
    var target = this;

    var computed = ko.computed(function () {
        return ko.utils.arrayFilter(target(), predicate);
    });

    var observableArray = new ko.observableArray(u(computed));

    computed.subscribe(function (newValue) { observableArray(newValue); });

    return observableArray;
};
Run Code Online (Sandbox Code Playgroud)


Pao*_*ndo 6

observableArray只是一个具有更多属性的可观察对象.因此,在闭包中返回数组的计算observable将被视为数组.

  • 好吧,有点.我只是测试它,似乎除非它被声明为一个可观察的数组,所以像shift和pop这样的方法并不适合你. (4认同)