Enlace tardío de matriz observable en KnockoutJS

Mi vista de maquinilla de afeitar MVC muestra este marcado:

function existingNamingsViewModel() {
            var self = this;
            var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
            self.ExistingNamings = ko.observableArray(initialData);
        }
        ko.applyBindings(new existingNamingsViewModel(), document.getElementById("namings-control"));

En un código serializado JS correcto, con initialData variable que se inicializa como:

var initialData = [{"TypeName":"Orders","NameBlocks":["{intInc_G}","/","{intInc_D}","/02/-","{yy}"],"ParamBlocks":["2296","","1","",""]}];

El html resultante, después de aplicar los enlaces ko, toma la forma de una cuadrícula editable: enter image description here

Necesito knockoutJS para poder actualizar automáticamente el modelo de vista cada vez que el usuario cambie los datos en esos campos de entrada. Pero dado que el modelo de vista se inicializó desde un objeto JSON simple, NameBlocks y ParamBlocks no son ko.observableArray. Necesito que lo sean. ¿Cómo logro esto?

La idea de PS One es hacer una inicialización más compleja donde razor serialice solo Name/ParamBlocks matrices, y ExistingNamings La matriz se rellena a través del código javascript manualmente, creando un objeto de clase de nomenclatura personalizado que tiene Name/ParamBlocks envuelto en ko.observableArray. ¿Pero es esta la única manera?

preguntado el 28 de julio de 12 a las 15:07

1 Respuestas

Hay una complemento de mapeo disponible que debería funcionar por usted, aunque es posible que deba cambiar la forma en que se entregan los datos.

El complemento de asignación proporciona una función que asigna un objeto JSON a un modelo de vista:

var viewModel = ko.mapping.fromJS(data);

Sin embargo, tenga en cuenta que en la documentación (vinculada a arriba), se nombran todas las propiedades dentro de los objetos JSON.

Los programas initialData que proporcionó en su ejemplo contiene matrices que son simplemente colecciones de valores, en lugar de colecciones de valores con nombre.

También, trabaja para initialData es una matriz que contiene un solo objeto. Si este escenario siempre va a esperar un solo objeto, entonces esta solución es más fácil.

Digamos que eres capaz de entregar initialData en el siguiente formato:

var initialData = {
    "TypeName":"Orders",
    "NameBlocks": [
        {"block":"{intInc_G}"},
        {"block":"/"},
        {"block":"{intInc_D}"},
        {"block":"/02/-"},
        {"block":"{yy}"}
    ],
    "ParamBlocks":[
        {"block":"2296"},
        {"block":""},
        {"block":"1"},
        {"block":""},
        {"block":""}
    ]
};

Luego, crear el modelo de vista sería tan simple como lo siguiente:

var viewModel = ko.mapping.fromJS(initialData);

$(function() {
   ko.applyBindings(viewModel); 
});

Aquí hay un violín que configuré para que puedas verlo en acción: http://jsfiddle.net/jimmym715/qUjLQ/

Con suerte, su solución será tan simple como algunos cambios en el formato de datos y el uso del complemento de mapeo.

De todos modos, el complemento de mapeo debería enviarlo en la dirección correcta.

Respondido 28 Jul 12, 21:07

Lo intenté. Pero siguió adelante y usó el enfoque de "modelos codificados" que mencioné en PS de mi pregunta, ya que la herramienta de mapeo hace que sea muy complicado agregar funciones a los elementos mapeados internos. - Máximo V Pavlov

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.