Sử dụng Tập hợp mẫu để nhóm các mục trong giao diện bộ sưu tập

Question

Tôi đang tạo ứng dụng bằng xương sống và marionette.js. Tôi đang lên kế hoạch sử dụng chế độ xem bộ sưu tập để trình bày một số mục và sau đó cho phép chúng được lọc, sắp xếp và nhóm.

Tôi đã tự hỏi liệu có bất kỳ ý tưởng thiết kế tốt nào để thực sự gắn thêm html theo kiểu được nhóm hay không. Tôi có một vài ý tưởng nhưng tôi đã tự hỏi nếu ai đó có thể có đầu vào mà sẽ là thiết kế tốt hơn.

Ý tưởng đầu tiên của tôi là thay đổi phương thức appendHtml trên chế độ xem bộ sưu tập và nếu nhóm được bật, tôi có thể có hàm appendHtml tìm hoặc tạo thùng của nhóm con và đặt chế độ xem con trong đó.

appendHtml: function(collectionView, itemView, index){ 
    var $container = this.getItemViewContainer(collectionView); 

    // get group from model 
    var groupName = itemView.model.get("group"); 

    // try to find group in child container 
    var groupContainer = $container.find("." + groupName); 

    if(groupContainer.length === 0){ 
    // create group container 
    var groupContainer = $('<div class="' + groupName + '">') 
    $container.append(groupContainer); 
    } 

    // Append the childview to the group 
    groupContainer.append(itemView); 
} 

Ý tưởng thứ hai của tôi là chia tách bộ sưu tập thành nhóm trước và sau đó có thể hiển thị nhiều lượt xem ... Điều này dường như có thể hiệu quả hơn, nhưng cũng có thể tốt hơn một chút so với mã cấu trúc có liên quan.

Bất kỳ đề xuất hoặc ý nghĩ gợi ý nào sẽ là tuyệt vời!

Cảm ơn

Answer 1

Có lẽ không chính xác những gì bạn đang tìm kiếm, nhưng đây là một câu hỏi nào liên quan:

Backbone.Marionette, collection items in a grid (no table)

Giải pháp của tôi đối với vấn đề đó - một bộ sưu tập lấy mà có thể được trả lại như một danh sách hoặc một lưới ("các mục được nhóm trong các hàng") đã sử dụng _.groupBy() trong một CompositeView "wrapper" và chuyển dữ liệu đã sửa đổi xuống chuỗi đến một CompositeView (hàng) và sau đó xuống đến một ItemView.

Views.Grid = Backbone.Marionette.CompositeView.extend({ 
    template: "#grid-template", 
    itemView: Views.GridRow, 
    itemViewContainer: "section", 
    initialize: function() { 
     var grid = this.collection.groupBy(function(list, iterator) { 
      return Math.floor(iterator/4); // 4 == number of columns 
     }); 
     this.collection = new Backbone.Collection(_.toArray(grid)); 
    } 
}); 

Dưới đây là một bản demo:

http://jsfiddle.net/bryanbuchs/c72Vg/

Answer 2

Tôi đã thực hiện cả hai điều bạn đề xuất và cả hai đều hoạt động tốt. Nó phần lớn đi xuống mà một trong những bạn thích và có lẽ cái nào phù hợp với kịch bản của bạn tốt hơn.

Nếu bạn có dữ liệu đã có trong phân cấp nhóm, sử dụng một trong nhiều plugin mô hình/bộ sưu tập phân cấp hoặc mã phân cấp của riêng bạn, thì ý tưởng hiển thị danh sách nhóm, mỗi nhóm sẽ hiển thị danh sách các mục có lẽ dễ dàng hơn.

Nếu bạn có dữ liệu bằng phẳng, nhưng chứa trường mà bạn sẽ nhóm theo, thì các thay đổi appendHtml có thể sẽ dễ dàng hơn.

hth

Answer 3

này là để bổ sung Derick's và bryanbuchs' câu trả lời. Phương pháp của tôi sử dụng chế độ xem bộ sưu tập chính và chế độ xem bộ sưu tập khác làm childView của nó.

Chế độ xem bộ sưu tập có phương thức 'addChild', được gọi là bất cứ khi nào một mô hình được thêm vào bộ sưu tập của chế độ xem. Phương thức 'addChild' có trách nhiệm hiển thị chế độ xem của trẻ và thêm nó vào HTML cho chế độ xem bộ sưu tập tại một chỉ mục nhất định. Bạn có thể xem mã nguồn trên github here. Tôi sẽ dán nó vào đây để đơn giản hóa:

addChild: function(child, ChildView, index) { 
    var childViewOptions = this.getOption('childViewOptions'); 
    if (_.isFunction(childViewOptions)) { 
     childViewOptions = childViewOptions.call(this, child, index); 
    } 

    var view = this.buildChildView(child, ChildView, childViewOptions); 

    // increment indices of views after this one 
    this._updateIndices(view, true, index); 
    this._addChildView(view, index); 
    return view; 
} 

Như bạn có thể thấy phương thức 'addChild' gọi phương thức 'buildChildView'. Phương pháp này thực sự xây dựng khung nhìn.

// Build a `childView` for a model in the collection. 
buildChildView: function(child, ChildViewClass, childViewOptions) { 
var options = _.extend({model: child}, childViewOptions); 
return new ChildViewClass(options); 
} 

Vì vậy, đối với trường hợp sử dụng của bạn, bạn có thể ghi đè phương thức 'addChild' và thực hiện cuộc gọi đến phương pháp ban đầu nếu tiêu chí nhóm của bạn được so khớp. Và sau đó trong phương thức 'buildChildView' đã ghi đè, bạn có thể chuyển nhóm (là tập con của bộ sưu tập của bạn) đến childView của nó, đó là một Marionette.CollectionView khác.

Ví dụ:

MyCollectionView.prototype.addChild = function(child, ChildView, index) { 
    if(mycriteria){ 
     return ProductGroup.__super__.addChild.apply(this, arguments); 
    } 
}; 

MyCollectionView.prototype.buildChildView = function(child, ChildViewClass, 
childViewOptions) { 

    options = _.extend({ 
     collection: "Pass your group collection which is a subset of your main collection"}, 
     childViewOptions 
    ); 

    return new ChildViewClass(options); 
    };