Najlepszy sposób sortowania kolekcji w CompositeView

Question

Próbuję posortować kolekcję w Marionette.CompositeView.
Mam kolekcję, która wygląda tak:

[ 
    {id: 1, name: 'bar'}, 
    {id: 2, name: 'boo' }, 
    {id: 3, name: 'foo' } 
] 

muszę uporządkować kolekcję przez ID w odwrotnej kolejności.
W rzeczywistości działa tylko po ponownym załadowaniu strony.
Po dodaniu nowego modelu nowy element jest dodawany losowo do listy.
Jeśli odświeżę stronę, zostaną one dobrze posortowane.

Moje pytania są następujące:
1) w jaki sposób rozwiązać problem podczas dodawania nowego modelu?
2) czy uda się poprawić kod?

---

Oto mój kod:

return Marionette.CompositeView.extend({ 

    initialize: function() { 
     this.collection.fetch(); 
    }, 

    onRender: function() { 
     var collection = this.collection; 

     collection.comparator = function (collection) { 
      return - collection.get('id'); 
     } 
    }, 

    onSuccess: function() { 
     this.collection.add(this.messageModel); 
     this.collection.sort(); // the messageModel seems to be added 
           // apparently randomly to the list. 
           // only if I refresh the page it will be ok 
    } 
}) 

Answer 1

można zadeklarować .comparator podczas tworzenia kolekcji? z twojego kodu. komparator istnieje tylko w lokalnej zmiennej var collection wewnątrz funkcji onRender. Jeśli poprawnie zdefiniowany zbiór musi być automatycznie sortowane i nie trzeba zadzwonić .sort po dodaniu nowego modelu

var Chapters = new Backbone.Collection({ 
    comparator = function(chapter) { 
     return chapter.get("id"); 
    }; 
}); 

Answer 2

Dla Marionette > = 2,0, CollectionView i CompositeViewmaintain sorting by default.

Na Marionette < 2,0 i> = 1.3.0:

var MySortedView = Backbone.Marionette.CollectionView.extend({ 

    // ... 

    appendHtml: function(collectionView, itemView, index) { 
    // Already sorted when buffering. 
    if (collectionView.isBuffering) { 
     Backbone.Marionette.CollectionView.prototype.appendHtml.apply(this, arguments); 
    } 
    else { 
     var childrenContainer = $(collectionView.childrenContainer || collectionView.el); 
     var children = childrenContainer.children(); 
     if (children.size() === index) { 
     childrenContainer.append(itemView.el); 
     } else { 
     childrenContainer.children().eq(index).before(itemView.el); 
     } 
    } 
    } 

}); 

Na Marionette < 2,0 lub < 1.3.0 (tak samo, jak poprzednio, bez buforowania)

var MySortedView = Backbone.Marionette.CollectionView.extend({ 

    // ... 

    appendHtml: function(collectionView, itemView, index) { 
    var childrenContainer = $(collectionView.childrenContainer || collectionView.el); 
    var children = childrenContainer.children(); 
    if (children.size() === index) { 
     childrenContainer.append(itemView.el); 
    } else { 
     childrenContainer.children().eq(index).before(itemView.el); 
    } 
    } 

}); 

To samo dotyczy CollectionView i CompositeView.

Answer 3

wierzę faceci Marionette rozważają budowę to pod Marionette, ale do tego czasu, mam zbudować trochę wstawek nazwie Sorted które można mieszać w swoich klasach CollectionView i CompositeView. To były intensywnie używane w środowisku produkcyjnym dla Gitter przez długi czas, a my znaleźliśmy to działa bardzo dobrze ..