Question

I built an app in early version of knockout and the code looked like:

    var ProductCollection = function(products, metadata) {
        var self = this;
        this.allProducts = products;
        this.activeProducts = ko.observableArray(products);

Then if I filtered out items from the activeProduct array like:

    this.activeProducts.remove(function(item) { //some code })

I was able to reset activeProducts to all products by doing something like:

    this.activeProducts(this.allProducts);

But now it seems like if I do the remove function above its removing products from this.allProducts also… Is the products i’m passing in and setting linking to the same reference or something? I don’t get why this would happen now and not before. I’d like to be able to keep this.activeProducts and this.allProducts as separate arrays.

Answer 1

As your experimentation has shown, ko.observableArray() simply wraps the underlying array. It doesn’t clone the underlying array and then make a new instance.

Here’s more from the the Knockout documentation:

An observableArray tracks which objects are in the array…

An observableArray just tracks which objects it holds, and notifies listeners when objects are added or removed…

…You can get the underlying JavaScript array by invoking the observableArray as a function with no parameters…

Technically you can use any of the native JavaScript array functions to operate on that underlying array…

---

// Thanks @RP Niemeyer
this.activeProducts = ko.observableArray(products.slice(0));

// Deep copy with jQuery
this.activeProducts = ko.observableArray(jQuery.extend(true, {}, products));

Also, if you’re really curious, there’s an entire question dedicated to Javascript cloning over here.