2013-06-04 19 views
11

Voglio implementare un array osservabile e all'interno di quell'array dovrebbero esserci oggetti osservabili (oggetto JS). E nella vista sto iterando questo array e ottenendo l'oggetto e mostrandogli le proprietà dell'oggetto. Diciamo che c'è un oggetto come il seguente,Come eseguire il Knockout di oggetti osservabili all'interno dell'array osservabile

{"name":"john","age":21,"address":"No 25"} 

Immaginate che l'array osservabile sia costituito da oggetti come sopra.

poi voglio cambiare singolo proprietà (nome per esempio) di un particolare oggettoe hanno bisogno di vedere il cambiamento nella vista.

Come posso farlo utilizzando il knockout?

Grazie.

risposta

9

Se si configurano gli utenti in un viewModel e si esegue il mapping con knockout mapping, si dovrebbe ottenere il risultato desiderato. Qualcosa di simile:

myObservableArray.push(new UserViewModel({"name":"john","age":21,"address":"No 25"})); 

var UserViewModel = function(data){ 
    var self = this; 
    ko.mapping.fromJS(data, {}, self);  
} 

In questo modo ciascuna delle proprietà mappate sarà un osservabile e quando cambiano, questo si rifletterà nel markup.

+0

A partire da ora, il plug-in referenziato nella risposta sembra abbandonato. –

+0

Funziona ancora con l'ultima versione di Knockout (3.4.0) –

2

Per convertire il modello in un modello di vista osservabile, è possibile utilizzare ko.utils.arrayMap e ko.mapping.fromJS.

var source = [{"name":"john","age":21,"address":"No 25"}]; 
var vm = ko.utils.arrayMap(source, function (item) { 
    return ko.mapping.fromJS(item) 
}); 

See fiddle

2

sufficiente definire un nuovo modello per i vostri elementi di dati e rendere ogni proprietà osservabile, in questo modo:

var dataItemModel = function (name, age, address) { 
    this.name = ko.observable(name); 
    this.age = ko.observable(age); 
    this.address = ko.observable(address); 
} 

Quando si arriva i dati, ciclo su di loro, creare il dataItemModel (che ha proprietà osservabili) e quindi aggiungi questo articolo al tuo ObservableArray.

Problemi correlati