javascript - 在 CompositeView 中对集合进行排序的最佳方式

Question

我正在尝试对 Marionette.CompositeView 中的集合进行排序。
我有一个看起来像这样的集合:

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

我需要按 ID 倒序对集合进行排序。
实际上它只有在我重新加载页面时才起作用。
当我添加一个新模型时，新项目显然是随机添加到列表中的。
如果我刷新页面，它们将被很好地排序。

我的问题是:
1) 添加新模型时如何解决？
2)可以改进代码吗？

---

这是我的代码:

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

对于 Marionette >= 2.0，CollectionView 和 CompositeView maintain sorting by default .

对于 Marionette <2.0 和 >= 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);
      } 
    }
  }

});

对于 Marionette <2.0 或 <1.3.0(与之前相同，没有缓冲):

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

});

CollectionView 和 CompositeView 是一样的。