La observación de las propiedades de una matriz que está siendo observado en KnockoutJS

Question

Estoy trabajando en una aplicación ASP.Net MVC. Mi acción está volviendo una vista con un modelo que es una matriz de objetos (una clase con propiedades como el nombre, ID, IsViewable).

var model = @Model.ToJson(); // done via extension call

Quiero observar esta matriz, por lo que cada vez que cambia puedo actualizar una tabla que se ha unido a una plantilla.

var viewModel = {
    accounts = ko.observableArray(model)
}

Esto funciona muy bien para añadir y elementos de la matriz de eliminar. Sin embargo, también quiero la plantilla de actualización cuando una propiedad en una de las cuentas cambios (es decir, nombre o ID).

En el sitio web KnockoutJS, que dice: Por supuesto, puede hacer que esas propiedades observables si lo desea, pero eso es una elección independiente . Esto es lo que no puedo encontrar la manera de hacer.

He intentado algo como esto sin resultado:

var viewModel = {
    accounts = ko.oservableArray([])
}

for(var i = 0; i < model.length; i++) {
    ko.observableArray(model[i]);
    viewModel.accounts.push(model[i]);
}

Publicación de la plantilla y la mesa si es necesario.

Answer 1

Usted debe mirar en la knockout.mapping plugin. Creo que hace todo lo que está buscando hacer.

Answer 2

que terminó siendo esto funcione, así que pensé que iba a compartir con cualquier persona que pueda tener el mismo problema.

Se necesita envolver los elementos de matriz en una clase de JavaScript. A continuación, en el constructor, establezca cada propiedad para obserable:

var model = @Model.ToJson();

var viewModel = {
    accounts = ko.observableArray(ko.utils.arrayMap(model, function(account) {
        return new AccountWrapper(account);
    }))
};

function AccountWrapper(account) {
    this.Property1 = ko.observable(account.Propery1);
    this.Property2 = ko.observable(account.Propery2);
    this.Property3 = ko.observable(account.Propery3);
}

ko.applyBindings(viewModel);

Y si desea modificar uno de los artículos directamente a ver el cambio, usted podría hacer algo como:

viewModel.accounts()[3].Name('My Name Changed');

Y todavía puede ser notificado cuando se agregan elementos o eliminar:

viewModel.accounts.remove(viewModel.accounts()[4]);

Answer 3

Aquí hay otro método que funciona y no requiere el plugin de mapeo:

var model = @Model.ToJson();

var viewModel = {
    accounts: ko.observableArray([]),

    fromJS: function(js) {
        for (var i = 0; i < js.length; i++) {
            this.accounts.push({ 
                Property1: ko.observable(js[i].Property1),
                Property2: ko.observable(js[i].Property2),
                Property3: ko.observable(js[i].Property3)
            });
        }
    }
};

viewModel.fromJS(model);
ko.applyBindings(viewModel);