Il modo migliore per ordinare una raccolta in un CompositeView

Question

Sto cercando di ordinare una collezione in un Marionette.CompositeView.
Ho una collezione che assomiglia a questo:

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

Ho bisogno di ordinare la collezione di id in ordine inverso.
In realtà funziona solo quando ricarico la pagina.
Quando aggiungo un nuovo modello, il nuovo elemento viene aggiunto apparentemente casuale all'elenco.
Se aggiorno la pagina, saranno ben ordinati.

Le mie domande sono:
1) come risolvere il problema quando aggiungo un nuovo modello?
2) sarà possibile migliorare il codice?

---

Ecco il mio codice:

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

Puoi dichiarare il .comparator quando si crea la collezione? dal tuo codice il .comparator esiste solo sulla variabile locale var collection all'interno della funzione OnRender. Se definito correttamente la raccolta deve essere ordinata automaticamente e non è necessario chiamare .Sort dopo l'aggiunta di nuovo modello

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

Answer 2

Per Marionette > = 2.0, CollectionView e CompositeViewmaintain sorting by default.

Per Marionette < 2.0 e> = 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); 
     } 
    } 
    } 

}); 

Per Marionette < 2.0 o 1.3.0 < (come prima senza 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); 
    } 
    } 

}); 

È lo stesso per CollectionView e CompositeView.

Answer 3

Credo che i ragazzi di Marionette stiano considerando di costruire questo in Marionette, ma fino a quel momento, ho creato un piccolo mixin chiamato Sorted che potete mescolare nelle vostre classi CollectionView e CompositeView. E 'stato molto utilizzato in un ambiente di produzione per Gitter per lungo tempo e troviamo funziona molto bene ..