backbone.js: Zaktualizuj model, ponownie sortuj i ponownie renderuj kolekcje modeli

Question

W mojej aplikacji mam połączenie socket.io, które nasłuchuje backendu i otrzymuje aktualizacje do modeli posiadanych przez przeglądarkę klientów (która pobiera model przez id i wywołuje set na atrybucie modelu).

Chciałbym, aby kolekcja została posortowana, a następnie ponownie wyświetlona jako całość, aby odzwierciedlić wszelkie nowe zamówienia w modelach w wyniku set (większość przykładów wydaje się znajdować się wokół pojedynczych widoków, które są ponownie renderowane). Jaka jest metoda osiągnięcia tego?

NB Mam backbone.js układ podniósł dość dosłownie z przykładowej aplikacji todo (jest to pierwsza aplikacja szkieletowa).

Answer 1

Możesz osiągnąć to, co chcesz, zapewniając metodę comparator dla swojej kolekcji.

Przykład:

ModelCollection = Backbone.Collection.extend({ 
    comparator: function(a, b) { 
     if (a.get("name") > b.get("name")) return 1; 
     if (a.get("name") < b.get("name")) return -1; 
     if (a.get("name") === b.get("name")) return 0; 
    }, 

    initialize: function() { 
     this.on('change:name', function() { this.sort() }, this); 
    } 
}); 

comparator w tym przykładzie spowoduje kolekcji mają być sortowane w kolejności rosnącej przez atrybut modeli wewnętrznych name.

Pamiętaj, że Twoja kolekcja nie zostanie automatycznie posortowana po zmianie atrybutów żadnego z jej models. Domyślnie sortowanie odbywa się tylko podczas tworzenia nowych modeli i dodawania ich do kolekcji; ale można użyć metody comparator w metodzie collection.sort.

Powyższy kod wykorzystuje tę funkcję, ustawiając detektor zdarzeń, który po prostu ponownie sortuje kolekcję na dowolnym change s na atrybuty name jej models.

Aby dopełnić obrazu, możemy ustawić odpowiedni detektor zdarzeń w View związanego z kolekcji aby upewnić się, że ponownie świadczy o wszelkich zmianach:

CollectionView = Backbone.View.extend({ 
    initialize: function() { 
     this.collection = new ModelCollection(); 
     this.collection.on('all', function() { this.render() }, this); 
    }, 

    render: function() { 
     this.$el.html(this.collection.toJSON()); 
    } 
}); 

to jest to :)

---

Odpowiedni fragment Backbone documentation:

domyślnie nie ma to comparator dla kolekcji. Jeśli zdefiniujesz wartość comparator, zostanie ona użyta do zachowania kolekcji w porządku posortowanym. Oznacza to, że w miarę dodawania modeli są one umieszczane we właściwym indeksie pod numerem collection.models. Komparator może być zdefiniowany jako sortBy (przekazywać funkcję, która przyjmuje pojedynczy argument), jako sort (przekazywać funkcję komparatora, która oczekuje dwóch argumentów) lub jako ciąg wskazujący atrybut do sortowania według. [...] Kolekcje z comparator nie będą automatycznie ponownie sortowane, jeśli później zmienisz atrybuty modelu, więc możesz chcieć zadzwonić pod numer sort po zmianie atrybutów modelu, które mogłyby wpłynąć na zamówienie.