Cách tốt nhất để sắp xếp bộ sưu tập trong một CompositeView

Question

Tôi đang cố gắng sắp xếp bộ sưu tập trong một Marionette.CompositeView.
Tôi có một bộ sưu tập mà trông như thế này:

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

tôi cần phải sắp xếp bộ sưu tập bởi id theo thứ tự ngược.
Thực ra nó chỉ hoạt động khi tôi tải lại trang.
Khi tôi thêm một mô hình mới, mục mới sẽ được thêm vào ngẫu nhiên vào danh sách.
Nếu tôi làm mới trang, chúng sẽ được sắp xếp tốt.

Câu hỏi của tôi là:
1) cách khắc phục sự cố khi tôi thêm mô hình mới?
2) có thể cải thiện mã không?

---

Đây là mã của tôi:

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

Bạn có thể khai báo .comparator khi bạn tạo bộ sưu tập? từ mã của bạn, .comparator chỉ tồn tại trên biến cục bộ var collection bên trong hàm onRender. Nếu được xác định một cách chính xác các bộ sưu tập phải được tự động sắp xếp và bạn không cần phải gọi .sort sau khi thêm mô hình mới

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

Answer 2

Đối với rối > = 2.0, CollectionView và CompositeViewmaintain sorting by default.

Đối với rối < 2.0 và> = 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); 
     } 
    } 
    } 

}); 

Đối với rối < 2.0 hoặc 1.3.0 < (giống như trước mà không có đệm):

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

}); 

Điều này cũng giống với CollectionView và CompositeView.

Answer 3

Tôi tin rằng các chàng trai Marionette đang xem xét việc xây dựng này vào Marionette, nhưng cho đến thời điểm đó, tôi đã xây dựng một chút mixin gọi là Sorted mà bạn có thể kết hợp vào các lớp học CollectionView và CompositeView của bạn. Nó được sử dụng nhiều trong môi trường sản xuất cho Gitter trong một thời gian dài và chúng tôi thấy nó hoạt động rất tốt ..