What is the best way of cloning/copying an observablearray in knockoutJS?

Question

Question says it all really. I want to copy an observable array to another in KnockoutJS.

Answer 1

Assuming you have something like:

modelA { someValues: observableArray(); }
modelB { iWantYourValues: observableArray(); }

You should be able to:

modelB.iWantYourValues(modelA.someValues())

Answer 2

I was faced with the same task; to clone an observable array. The only way I could figure out how to do it, is to convert the observable to an JS object, then convert that object to an observable object. The following function requires KnockoutJS mapping plugin: http://knockoutjs.com/documentation/plugins-mapping.html

function cloneObservable(observableObject) {
    return ko.mapping.fromJS(ko.toJS(observableObject));
}

Hope this helps

Answer 3

To clone an observableArray you would want to do:

var viewModel = {
    array1: ko.observableArray(["one", "two"]),
    array2: ko.observableArray()
};

viewModel.clone = function() {
   viewModel.array1(viewModel.array2.slice(0));
};

If you want to just do a copy, then you would do:

viewModel.array1(viewModel.array2());

The problem with the second example is that the underlying array is the same, so pushing to array1 or array2 would result in both having the new value (as they both point to the same array).

Answer 4

Not exactly what you're asking, but I'd like to add this for posterity...

If you want to clone an observable that stays in sync with the original (most often to create a throttled/debounced clone while maintaining the original), you can do something as such:

const clone = ko.pureComputed(() => original()).extend({ rateLimit: 500 })