How to create a computed observable array in Knockout

Question

I would like to know how to create a computed observable array.

In my view model, I have 2 observable arrays, and I would like to have a computed observable array that is simply both arrays combined.

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

Answer 1

This will combine the two arrays and return the combined list. However, it is not a computed observable array (don't know if that is even possible), but a regular computed observable.

self.masterList = ko.computed(function() {
    return this.listA().concat(this.listB());
}, this);

Answer 2

self.masterList = ko.observableArray();
ko.computed(function () {
    self.masterList(self.listA().concat(self.listB()));
});

Similar to Joe Flateau's answer in spirit, but I like to think this method is simpler.

Answer 3

I know this is an old question but I thought I'd throw my answer in there:

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

Answer 4

An observableArray is just an observable with a few more properties. Therefore, a computed observable that returns an array in the closure will be treated as an array.

Answer 5

I'm not sure if this is the most efficient option - but it is fairly simple and works for me. The ko.computed returns an observable array as below:

self.computedArrayValue = ko.computed(function() {
    var all = ko.observableArray([]);
    ....
    return all(); 
});

A working example of the code: Html:

<div data-bind="foreach: days">
    <button class="btn btn-default btn-lg day" data-bind="text: $data, click: $root.dayPressed"></button>        
</div> 

Javascript function on the view model:

self.days = ko.computed(function() {
    var all = ko.observableArray([]);
    var month = self.selectedMonth();   //observable
    var year = self.selectedYear();     //observable
    for (var i = 1; i < 29; i++) {
        all.push(i);
    }
    if (month == "Feb" && year % 4 == 0) {
        all.push(29);
    } else if (["Jan","Mar","May","Jul","Aug","Oct","Dec"].find((p) => p == month)) {
        [29,30,31].forEach((i) => all.push(i));
    } else if (month != "Feb") {
        [29,30].forEach((i) => all.push(i));                
    }
    return all(); 
});