Tạo chế độ xem xương sống cho bộ sưu tập

Question

Làm cách nào để liên kết chế độ xem xương sống với tập hợp chứ không phải là mô hình? Tôi có cần bọc bộ sưu tập trong một mô hình không?

ví dụ:

Nếu tôi có một khách hàng mô hình xương sống và một bộ sưu tập của những tên Khách hàng

Client = Backbone.Model.extend({ 
    defaults: { 
     Name: '' 
    } 
}); 

Clients = Backbone.Collection.extend({ 
    model: Client, 
    url: 'Clients' 
}); 

và một cái nhìn

var ClientListView = Backbone.View.extend({ 
     template: _.template($("#clients-template").html()), 
     el: $('#clientlist'), 

     initialize: function() { 
      _.bindAll(this, 'render'); 

      this.collection = new Clients(); 
     }, 

     render: function(event){ 
      $(this.el).html(this.template({ this.collection.toJSON())); 

      return this; 
     } 
    }); 

sau đó tôi không thể truy cập mỗi yếu tố khách hàng trong các mẫu gạch dưới. Tuy nhiên, nếu tôi gói bộ sưu tập như thế này

$(this.el).html(this.template({ clients: this.collection.toJSON() })); 

thì tôi có thể. Đây có phải là cách chính xác để giải quyết vấn đề này không? Tôi cho rằng đây là một kịch bản phổ biến nhưng tôi không thể tìm thấy bất kỳ ví dụ nào về nó, tôi có đi sai đường không?

Answer 1

Có, bạn cần phải vượt qua bộ sưu tập được bao bọc.

Addy Osmani đang sử dụng phương pháp tương tự trong Backbone Fundamentals ví dụ của mình - xem ví dụ this view và tương ứng template:

Trong giao diện:

$el.html(compiled_template({ results: collection.models })); 

Trong mẫu:

<% _.each(results, function(item, i){ %> 
    ... 
<% }); %> 

Một thay thế là có chế độ xem sẽ tạo chế độ xem riêng cho từng mô hình trong bộ sưu tập. Dưới đây là một ví dụ từ An Intro to Backbone.js: Part 3 – Binding a Collection to a View:

var DonutCollectionView = Backbone.View.extend({ 
    initialize : function() { 
    this._donutViews = []; 
    this.collection.each(function(donut) { 
     that._donutViews.push(new UpdatingDonutView({ 
     model : donut, 
     tagName : 'li' 
     })); 
    }); 
    }, 

    render : function() { 
    var that = this; 
    $(this.el).empty(); 

    _(this._donutViews).each(function(dv) { 
     $(that.el).append(dv.render().el); 
    }); 
    } 
}); 

Answer 2

Bạn có thể muốn có một cái nhìn tại backbone collectionView.