Question

111

How do I make a deep copy of a knockout object that was created by the mapping plugin

rated 0 times [ 117] [ 6] / answers: 1 / hits: 22953 / 12 Years ago, sat, september 8, 2012, 12:00:00

Here's my scenario. I'm using the knockout mapping plugin to create an observable viewmodel hierarchy for me. My hierarchy has nested elements in it. At a particular point in the hierarchy I want to put an Add button to insert a new blank copy of that element in the observablearray. The problem is I can't just say whateverArray.push(new MyObject()).

Since the mapping plugin actually created the whole hierarchy for me, I don't have access to MyObject. So it seems the only thing I can do to insert a new item is to look at a previous item and copy it. I tried the ko.utils.extend function, but that doesn't appear to be making an actual clone. It gives me an object back, but when I update that object it still affects the original object that it was copied from.

See jsfiddle example

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

georginat

Add To Favorites

Follow

Total Points: 656

Total Questions: 107

Total Answers: 108

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

answered 12 Years ago makaylahk · Accepted Answer

There might be a way to set this up in the mapping settings but I can't quite figure that out just yet.

In the mean time, you could just unmap the object and map it back so you are essentially making a copy.

var newJob = ko.mapping.fromJS(ko.mapping.toJS(job));

This will be the easiest way to do it just like any other library, deserialize and serialize back again.

I was looking hard for a nice way to do this using the mapping options and found a way.

By default, the mapping plugin will take the observable instances from the source object and use the same instance in the target object. So in effect, both instances will share the same observables (bug?). What we needed to do was create a new observable for each property and copy the values over.

Fortunately, there is a handy utility function to map out each of the properties of an object. We can then create our new observable instances initialized with copies of the values.

// Deep copy

var options = {

    create: function (options) {

        // map each of the properties

        return ko.mapping.visitModel(options.data, function (value) {

            // create new instances of observables initialized to the same value

            if (ko.isObservable(value)) { // may want to handle more cases

                return ko.observable(value);

            }

            return value;

        });

    }

};

var newJob = ko.mapping.fromJS(job, options);

Note that this will be a shallow copy, you'll probably have to recursively map the objects if you want a deep copy. This will fix the problem in your example however.