Làm thế nào để bạn tự động tạo các yếu tố khung nhìn Backbone?

Question

Tôi muốn tạo một số thành phần xem trong ứng dụng Backbone js động. Khi một khung nhìn mới được khởi tạo, tôi muốn nó chèn phần tử mới vào DOM, lưu trữ tham chiếu đến phần tử trong view.el và ủy quyền các sự kiện như bình thường.

Tôi hiểu rằng tôi có thể đặt vào html của mình và sau đó thiết lập chế độ xem với el: "#test" nhưng điều này có vẻ quá mức cần thiết cho các phương thức và chế độ xem khác không tập trung vào ứng dụng web. Có cách nào được quy định để làm điều này tôi đang thiếu trong tài liệu? Tôi chỉ hiểu nhầm cách mà lượt xem được cho là hoạt động?

Answer 1

Chế độ xem xương sống sẽ tạo ra một el cho bạn mà không cần phải làm gì cả. Theo mặc định, nó tạo ra một <div>. Tuy nhiên, bạn có thể tạo bất kỳ tên thẻ nào bạn muốn. Khi bạn đã xem chế độ xem, hãy triển khai phương thức render trên chế độ xem và điền el bằng HTML của bạn.

MyView = Backbone.View.extend({}); 

var v = new MyView(); 
console.log(v.el); // => "<div></div>" 


// define your own tag, and render contents for it 

MyTagView = Backbone.View.extend({ 
    tagName: "ul", 

    render: function(){ 
    this.$el.html("<li>test</li>"); 
    } 
}); 

var v2 = new MyTagView(); 
v2.render(); 
console.log(v2.el); // => "<ul><li>test</li></ul>" 

Thực tiễn phổ biến là sử dụng hệ thống mẫu để hiển thị HTML của chế độ xem, như mẫu Underscore.js, Handlebars hoặc bất kỳ công cụ mẫu JavaScript mẫu nào khác.

Khi bạn có nội dung được tạo từ chế độ xem, bạn cần phải gắn nó vào DOM ở đâu đó trước khi nó hiển thị. Việc này thường được thực hiện bằng jQuery hoặc một plugin khác:

$("#some-element").html(v2.el);