Thay thế giữa 2 mẫu khác nhau trong backbone.js

Question

Tôi có 2 mẫu khác nhau cho chế độ xem của mô hình. Mỗi lần các mô hình được lấy từ cơ sở dữ liệu, 3 mô hình đầu tiên (# 1, 2, 3) được tìm nạp từ phần cuối sẽ có chế độ xem được tạo bằng mẫu đầu tiên, 4 mô hình tiếp theo (# 4, 5, 6, 7) sẽ sử dụng mẫu thứ hai, 3 mô hình tiếp theo (# 8, 9, 10) sẽ sử dụng mẫu đầu tiên và vân vân.

Sự cố: Tôi sẽ giới thiệu mẫu thay thế này bằng cách sử dụng backbone.js như thế nào?

JS Mã

// Views 

PhotoListView = Backbone.View.extend({ 
    el: '#photo_list', 

    render: function() { 
     $(this.el).html(''); 
     _.each(this.model.models, function(photo) { 
      $(this.el).append(new PhotoListItemView({ model: photo }).render().el); 
     }, this); 
     return this; 
    } 
}); 

PhotoListItemView = Backbone.View.extend({ 
    tagNAme: 'div', 
    className: 'photo_box', 

    template: _.template($('#tpl_PhotoListView').html()), 

    initialize: function() { 
     this.model.bind('destroy', this.close, this); 
    }, 

    render: function() { 
     $(this.el).html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    close: function() { 
     this.unbind(); 
     this.remove(); 
    } 
}); 

Answer 1

Trước hết, PhotoListView của bạn được gói một bộ sưu tập, do đó bạn nên sử dụng this.collection bên trong xem và new PhotoListView({ collection: c }) để tạo ra nó. Lần điều trị các collection option similarly to how they treat model:

constructor/khởinew View([options])

[...] Có một số tùy chọn đặc biệt, nếu được thông qua, sẽ được gắn trực tiếp vào xem: model, collection, el, id, className, tagName và các thuộc tính.

Sử dụng tên phù hợp sẽ giúp tránh nhầm lẫn. Ngoài ra, chế độ xem có some Underscore methods đã được trộn lẫn để bạn có thể nói this.collection.each(...) thay vì _.each(this.collection.models, ...) hoặc _(this.collection.models).each(...). Bạn cũng có thể sử dụng this.$el thay vì $(this.el).

Và bây giờ là vấn đề thực sự của bạn. Bạn có thể thêm hai mẫu để bạn xem mỗi mô hình:

PhotoListItemView = Backbone.View.extend({ 
    template0: _.template($('#the-first-template-id').html()), 
    template1: _.template($('#the-other-template-id').html()), 
    //... 
}); 

và một tùy chọn để cho nó cái nào để sử dụng:

initialize: function(options) { 
    this.template = this['template' + options.template_number]; 
    //... 
} 

Sau đó, bạn chỉ cần phải xác định group tùy chọn từ trình xem bộ sưu tập . Gạch của each vượt qua chỉ số lặp với chức năng gọi lại như là đối số thứ hai vì vậy bạn chỉ cần một chút toán số nguyên để tìm ra template_number sử dụng:

this.collection.each(function(photo, i) { 
    // Grouped in threes and you're alternating between two templates. 
    var n = Math.floor(i/3) % 2; 
    var v = new PhotoListItemView({ model: photo, template_number: n }); 
    this.$el.append(v.render().el); 
}, this);