javascript - tutorial - ¿Cómo hago una copia profunda de un objeto knockout que fue creado por el plugin de mapeo?

updraftplus

Question

Aquí está mi escenario. Estoy usando el complemento de mapeo knockout para crear una jerarquía de modelo de vista observable para mí. Mi jerarquía tiene elementos anidados en ella. En un punto particular de la jerarquía, quiero poner un botón Agregar para insertar una nueva copia en blanco de ese elemento en el conjunto observable. El problema es que no puedo decir whateverArray.push (nuevo MyObject ()).

Dado que el complemento de mapeo realmente creó toda la jerarquía para mí, no tengo acceso a "MyObject". Por lo tanto, parece que lo único que puedo hacer para insertar un nuevo elemento es mirar un elemento anterior y copiarlo. Probé la función ko.utils.extend, pero parece que no está haciendo un clon real. Me devuelve un objeto, pero cuando actualizo ese objeto, todavía afecta al objeto original desde el que se copió.

Ver el example jsfiddle

Answer 1

Puede haber una manera de configurar esto en la configuración de mapeo, pero todavía no puedo entenderlo.

Mientras tanto, puedes desasignar el objeto y asignarle un mapa para que esencialmente estés haciendo una copia.

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

Esta será la forma más fácil de hacerlo como cualquier otra biblioteca, "deserializar" y "serializar" de nuevo.

Estaba buscando una forma agradable de hacer esto usando las opciones de mapeo y encontré una forma.

Por defecto, el plugin de mapeo tomará las instancias observables del objeto fuente y usará la misma instancia en el objeto objetivo. Entonces, en efecto, ambas instancias compartirán los mismos observables (¿error?). Lo que teníamos que hacer era crear un nuevo observable para cada propiedad y copiar los valores.

Afortunadamente, hay una útil función de utilidad para mapear cada una de las propiedades de un objeto. Luego podemos crear nuestras nuevas instancias observables inicializadas con copias de los valores.

// 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);

Tenga en cuenta que esta será una copia superficial, probablemente tendrá que mapear recursivamente los objetos si quiere una copia profunda. Sin embargo, esto solucionará el problema en tu ejemplo.

Answer 2

ko.utils.clone = function (obj) {
    var target = new obj.constructor();
    for (var prop in obj) {
        var propVal = obj[prop];
        if (ko.isObservable(propVal)) {
            var val = propVal();
            if ($.type(val) == ''object'') {
                target[prop] = ko.utils.clone(val);
                continue;
            }
            target[prop](val);
        }
    }
    return target;
};

Aquí está mi solución, espero que ayude. En este código, obj sería tu objeto viewModel.