在 CompositeView 中对集合进行排序的最佳方法答案

【问题标题】：The best way to sort a collection in a CompositeView在 CompositeView 中对集合进行排序的最佳方法
【发布时间】：2012-07-25 21:08:49
【问题描述】：

我正在尝试对 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
    }
})

【问题讨论】：

标签： javascript backbone.js marionette

【解决方案1】：

对于木偶 >= 2.0、CollectionView 和 CompositeView maintain sorting by default。

对于木偶 = 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 （与之前相同，没有缓冲）：

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 相同。

【讨论】：

github 链接已失效 :-(
github 链接不再失效 :-)
Github 链接又失效了。
wiki 已被删除，因为 V2 现在是处理此问题的标准库。

【解决方案2】：

我相信 Marionette 的人正在考虑将其构建到 Marionette 中，但在此之前，我已经构建了一个名为 Sorted 的小混音器，您可以将其混入您的 CollectionView 和 CompositeView 类中。它在Gitter 的生产环境中被大量使用了很长时间，我们发现它运行良好..

【讨论】：

【解决方案3】：

您可以在创建集合时声明 .comarator 吗？从您的代码中， .comarator 仅存在于 onRender 函数内的局部变量 var collection 上。如果定义正确，集合必须自动排序，添加新模型后无需调用 .sort

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

【讨论】：