La mejor manera de ordenar una colección en un CompositeView

Question

Estoy tratando de ordenar una colección en un Marionette.CompositeView.
Tengo una colección que se parece a esto:

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

necesito para ordenar la colección por id en orden inverso.
En realidad, solo funciona cuando recargo la página.
Cuando agrego un nuevo modelo, el nuevo elemento se agrega aparentemente al azar a la lista.
Si actualizo la página, estarán bien ordenados.

Mis preguntas son:
1) cómo solucionar el problema cuando agrego un nuevo modelo?
2) ¿será posible mejorar el código?

---

Aquí está mi código:

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

¿Se puede declarar la .comparator al crear la colección? de su código el .comparator existe solo en la variable local var collection dentro de la función Render. Si se define correctamente la colección se debe ordenar de forma automática y no es necesario llamar a .Sort después de añadir nuevo modelo

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

Answer 2

Para marionetas > = 2.0, y CollectionViewCompositeViewmaintain sorting by default.

Para marionetas < 2,0 y> = 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); 
     } 
    } 
    } 

}); 

Para marionetas < 2,0 o < 1.3.0 (igual que antes sin buffering):

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

}); 

Es lo mismo para CollectionView y CompositeView.

Answer 3

Creo que los chicos de Marionette están considerando construir esto en Marionette, pero hasta ese momento, he construido un mixin llamado Sorted que puedes mezclar en tus clases CollectionView y CompositeView. Ha sido muy usada en un entorno de producción para Gitter durante mucho tiempo y nos encontramos con que funciona muy bien ..