Knockout - Używanie foreach i sortowanie razem

Question

Mam problem z łączeniem wiązania foreach z sortowaniem. Mam listę związany tak:

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

widżetów jest prosta obvservable tablicy:

var widgets= ko.observableArray(); 

to działa ładnie dając mi listę moich „widżety”. Jeśli dodaję nowy "widget" do tej listy, to pojawi się ona dynamicznie na liście poprzez powiązanie danych.

jednak tak szybko, jak dodać do sortowania tablicy:

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

Następnie nowo dodane widżety nie pojawiają się na mojej liście - chyba że odświeżyć stronę. (Sortowanie ładnie działa w tym momencie - jeśli zaktualizuję pole "zamówienie", które sortuję, to pozycje na mojej liście są dynamicznie sortowane ponownie).

W jaki sposób mogę uzyskać ładowanie dobrej sortowania z dynamiczną aktualizacją nowych elementów w mojej tablicy obserwowalnej?

Używam Breezejs do pobierania moich danych, ale nie sądzę, że ma to wpływ na ten scenariusz.

Answer 1

The observableArray.sort zwraca posortowaną leżącą pod spodem ("zwykłą") tablicę, a nie observableArray, dlatego zmiany nie są widoczne w interfejsie użytkownika.

Aby zaktualizować sortowanie i interfejs użytkownika, należy utworzyć ko.computed, które sortuje i wykorzystuje obliczone wiązanie. Ponieważ ko.computed będzie nasłuchiwał zmian widgets i ponownie obliczyć sortowanie.

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

Następnie można powiązać go z:

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