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

对于木偶＆gt; = 2.0 ，CollectionView和CompositeView maintain sorting by default。

对于木偶＆lt; 2.0和＆gt; = 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);
      } 
    }
  }

});

对于木偶＆lt; 2.0或＆lt; 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来说，它是一样的。

Answer 2

我相信木偶家伙正在考虑把它变成木偶，但在此之前，我已经建立了一个名为Sorted的小混音，你可以混合到你的CollectionView和{{1}类。它已经在Gitter的生产环境中大量使用了很长时间，我们发现它的效果非常好。

Answer 3

您可以在创建集合时声明.comparator吗？从您的代码中，.comparator仅存在于onRender函数内的局部变量var collection上。如果正确定义，则必须自动对集合进行排序，并且在添加新模型

后无需调用.sort

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

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

3 个答案: