2011-08-17 27 views
26

Tôi đang sử dụng Handlebars.js làm công cụ tạo khuôn mẫu cho ứng dụng Backbone.js của mình. Tôi làm cho chức năng trong quan điểm của tôi thường trông giống như sau:Dừng xương sống từ việc thêm div xung quanh vào chế độ xem?

var source = $("#round").html(); 
    var template = Handlebars.compile(source); 
    var context = JSON.parse(JSON.stringify(this.model)); 
    var html = template(context); 
    $(this.el).html(html); 
    return this; 

Ở trên là nối vào xem ứng dụng chính thông qua các đoạn mã sau (đây là mã gọi mã ở trên):

$('div#round-container', this.el).append(roundView.render().el); 

Mẫu Handlebars của tôi xử lý tất cả kiểu dáng và bố cục, vì vậy tôi để trống phần tử "el" của chế độ xem. Backbone.js tự động thêm các thẻ div xung quanh mẫu Handlebars. Tôi cho rằng điều này là do phần tử "el" trống. Có cách nào để ngăn chặn việc bổ sung các thẻ div xung quanh? Cảm ơn!

Trả lời

40

Điều gì đang xảy ra là this.el được tạo khi đang di chuyển vì nó chưa bao giờ được bạn đặt rõ ràng. Bạn có hai lựa chọn:

  1. Bạn nên xác định các yếu tố bạn muốn tạo với tagName, className và/hoặc id và để cho xương sống tạo ra điều đó cho bạn.

  2. Trong render bạn nên đặt this.el thành nội dung của mẫu tay lái. Vì vậy, bạn sẽ có this.el = $(template(context)).

Các tài liệu có một lời giải thích mở rộng - http://documentcloud.github.com/backbone/#View-el

+5

setElement là một lựa chọn tốt quá –

+1

Sau khi goi ng với tùy chọn 2., gửi sự kiện không được kích hoạt – svlada

+0

@svlada, 'setElement' cũng gọi' this.undelegateEvents(); 'và' this.delegateEvents(); 'để đảm bảo các sự kiện trong hàm băm sự kiện được áp dụng cho thành phần. Bạn có thể gọi chúng là yourselft nếu setElement nằm ngoài câu hỏi. [source] (http://backbonejs.org/docs/backbone.html#section-162) –

5

Một cách dễ dàng là để phụ thêm childNodes của phần tử trả lại thay vì

$('div#round-container', this.el).append(roundView.render().el.childNodes); 
+1

Không sử dụng điều này, bạn sẽ mất tất cả sự kiện trong chế độ xem của mình. – Brent

+0

Đã dành 2 giờ để tìm ra lý do tại sao .. :( – Brent

3

Hoặc thêm html của phần tử trả lại, ví dụ như:

$('div#round-container', this.el).append(roundView.render().el.html()); 
Các vấn đề liên quan