Knockout - Utilizzo di foreach e ordinamento insieme

Question

Ho problemi a combinare l'associazione foreach con un ordinamento. Ho una lista legata in questo modo:

<article data-bind="foreach: widgets"> 

Widgets è un semplice array obvservable:

var widgets= ko.observableArray(); 

Questo funziona bene dandomi una lista dei miei "widget". Se aggiungo un nuovo "widget" a questa lista, viene visualizzato dinamicamente nell'elenco tramite associazione dati.

Tuttavia, non appena ho aggiungere l'ordinamento alla matrice:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })"> 

Poi di recente aggiunti i widget non appaiono più nella mia lista - a meno che non ricaricare la pagina. (L'ordinamento funziona bene a questo punto - se aggiorno il campo "ordine" su cui mi sto occupando, gli articoli nel mio elenco vengono riordinati dinamicamente).

Come posso ottenere che l'ordinamento suoni bene con l'aggiornamento dinamico di nuovi elementi nel mio array osservabile?

Sto utilizzando Breezejs per recuperare i miei dati, tuttavia non penso che questo abbia un impatto su questo scenario.

Answer 1

observableArray.sort restituisce l'array sottostante ordinato ("normale") e non uno observableArray, motivo per cui le modifiche non sono visualizzate nell'interfaccia utente.

Per avere l'ordinamento e l'interfaccia utente aggiornati è necessario creare un ko.computed che esegue l'ordinamento e utilizzare il calcolo nell'associazione. Perché ko.computed ascolterà le modifiche widgets e ricalcoli l'ordinamento.

var widgets= ko.observableArray(); 

var sortedWidgets = ko.computed(function() { 
    return widgets().sort(function (left, right) { 
     return left.order() == right.order() ? 
      0 : 
      (left.order() < right.order() ? -1 : 1); 
    }); 
}); 

Quindi è possibile associare con:

<article data-bind="foreach: sortedWidgets" />