knockoutjs ObservableArrays e funzione di ordinamento: UI non aggiornata

Question

Nel mio viewmodel, ho un knockoutjs ObserableArray. Subito dopo aver inizializzato ViewModel, lega i dati con successo. Quindi, quello che devo fare è ordinare la collezione.

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

vm.searchResults().sort(function (a, b) { 
    return a.Name().toLowerCase() > b.Name().toLowerCase() ? 1 : -1; 
}); 

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

Come potete vedere, l'uscita io il nome dell'elemento alla console per vedere l'ordine prima e dopo l'ordinamento. L'ordinamento funziona bene. Il problema è con l'aggiornamento dell'interfaccia utente. In qualche modo, l'interfaccia utente non è aggiornata.

Poi, provare a rimuovere un record dalla matrice con il seguente codice per vedere se l'interfaccia utente risponderà a questo o no:

vm.searchResults().shift(); 

L'interfaccia utente rimane lo stesso e non ha aggiornato ancora una volta. Quale sarebbe il problema qui?

Edit:

Ecco un caso di esempio così: http://jsfiddle.net/tugberk/KLpwP/

Lo stesso problema anche qui.

Edit:

ho risolto il problema, come mostrato in questo esempio: http://jsfiddle.net/tugberk/KLpwP/16/ Ma io non sono ancora sicuro perché ha funzionato come ho cercato in un primo momento.

Answer 1

Si sta scartando l'array osservabile quando lo si ordina. Questo è causa di problemi, perché KO non può tenere traccia dell'array è stato cambiato. ko.observableArray() ha la funzione sort con la stessa firma e notificherà agli abbonati osservabili che è stata modificata. La soluzione è molto semplice: rimuovere le parentesi graffe vm.searchResults().sort =>vm.searchResults.sort. Guarda il mio esempio: http://jsfiddle.net/RbX86/

Un altro modo per dire a KO che la matrice ha delle modifiche - chiama il metodo valueHasMutated dopo le manipolazioni con la matrice. Esaminare questo esempio: http://jsfiddle.net/RbX86/1/ Questo approccio è molto utile quando è necessario apportare molte modifiche alla matrice e si desidera aggiornare l'interfaccia utente solo una volta.