Osservando le proprietà di una matrice che è stato osservato in KnockoutJS

Question

Sto lavorando su un'applicazione ASP.Net MVC. La mia azione sta tornando una vista con un modello che è un array di oggetti (una classe con immobili come nome, ID, IsViewable).

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

Voglio osservare questo array, quindi ogni volta che cambia posso aggiornare una tabella che è stata legata a un modello.

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

Questo funziona bene per l'aggiunta e l'eliminazione di elementi dell'array. Tuttavia, voglio anche il modello per aggiornamento quando una proprietà in uno dei conti modifiche (ad esempio, nome o l'ID).

Sul sito KnockoutJS, dice: Naturalmente, è possibile effettuare le proprietà osservabili se lo si desidera, ma questo è una scelta indipendente . Questo è quello che non riesco a capire come fare.

ho provato qualcosa di simile senza alcun risultato:

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

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

posso postare il modello e la tavola, se è necessario.

Answer 1

Si dovrebbe esaminare la knockout.mapping plugin. Penso che fa tutto quello che stai cercando di fare.

Answer 2

Ho finito per ottenere questo lavoro, così ho pensato di condividere con chiunque che potrebbe avere lo stesso problema.

È necessario per avvolgere i vostri oggetti di matrice in una classe JavaScript. Poi nel costruttore, impostare ogni proprietà 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);

E se si desidera modificare uno degli elementi direttamente a vedere il cambiamento, si potrebbe fare qualcosa di simile:

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

E si può ancora essere avvisato quando vengono aggiunti elementi o rimuovere:

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

Answer 3

Ecco un altro approccio che funziona e non richiede il plugin mappatura:

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