最好的办法在CompositeView中的排序集合 [英] The best way to sort a collection in a CompositeView

问题描述

我想在排序集合的 Marionette.CompositeView 。结果
我有一个集合看起来像这样：

  [
   {ID：1，名称：'棒'}，
   {ID：2，名称：'嘘'}，
   {ID：3，名称：'富'}
]
 

我需要通过以相反的顺序号到集合排序。结果
其实，当我重新加载页面才起作用。结果
当我添加一个新的模式，新项目添加显然随机到列表中。结果
如果我刷新页面，就会得到很好的排序。

我的问题是：结果
1）当我添加一个新的模型如何解决这一问题？结果
2）将有可能提高code吗？

---

下面是我的code：

 返回Marionette.CompositeView.extend（{    初始化：功能（）{
        this.collection.fetch（）;
    }，    OnRender方法：功能（）{
        VAR收集= this.collection;        collection.comparator =功能（集合）{
            返回 -  collection.get（'身份证'）;
        }
    }，    的onSuccess：功能（）{
        this.collection.add（this.messageModel）;
        this.collection.sort（）; //在messageModel似乎要添加
                                //显然随机到列表中。
                                //只有当我刷新页面这将是确定
    }
}）
 

解决方案

有关木偶> = 2.0 ，的CollectionView 和 CompositeView中的 maintain默认排序

有关木偶的＆LT; 2.0和> = 1.3.0

  VAR MySortedView = Backbone.Marionette.CollectionView.extend（{  // ...  appendHtml：功能（的CollectionView，ItemView控件，指数）{
    //缓冲时已经排序。
    如果（collectionView.isBuffering）{
      Backbone.Marionette.CollectionView.prototype.appendHtml.apply（这一点，参数）;
    }
    其他{
      VAR childrenContainer = $（collectionView.childrenContainer || collectionView.el）;
      变种孩子= childrenContainer.children（）;
      如果（children.size（）===指数）{
        childrenContainer.append（itemView.el）;
      }其他{
        。childrenContainer.children（）EQ（指数）。前（itemView.el）;
      }
    }
  }}）;
 

有关木偶的＆LT; 2.0或LT; 1.3.0 （同前无缓冲）：

  VAR MySortedView = Backbone.Marionette.CollectionView.extend（{  // ...  appendHtml：功能（的CollectionView，ItemView控件，指数）{
    VAR childrenContainer = $（collectionView.childrenContainer || collectionView.el）;
    变种孩子= childrenContainer.children（）;
    如果（children.size（）===指数）{
      childrenContainer.append（itemView.el）;
    }其他{
      。childrenContainer.children（）EQ（指数）。前（itemView.el）;
    }
  }}）;
 

这是对的CollectionView和CompositeView中的相同。

I am trying to sort a collection in a Marionette.CompositeView.
I have a collection which looks like this:

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

I need to sort the collection by id in reverse order.
Actually it work only when I reload the page.
When I add a new model, the new item is added apparently random to the list.
If I refresh the page, they will be well sorted.

My questions are:
1) how to fix the problem when I add a new model?
2) it will be possible to improve the code?

---

Here is my code:

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

解决方案

For Marionette >= 2.0, CollectionView and CompositeView maintain sorting by default.

For Marionette < 2.0 and >= 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);
      } 
    }
  }

});

For Marionette < 2.0 or < 1.3.0 (same as before without 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);
    } 
  }

});

It's the same for CollectionView and CompositeView.

这篇关于最好的办法在CompositeView中的排序集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！