Các sự kiện xem làm mới xương sống

Question

Theo quan điểm của tôi, tôi không khai báo điều này.el vì tôi tạo ra nó theo thực tế, nhưng theo cách này các sự kiện không cháy.

Đây là mã:

Xem 1:

App.Views_1 = Backbone.View.extend({ 

    el:    '#content', 

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

    render:   function() {  
         this.model.each(this.renderSingle);     
        }, 

    renderSingle: function(model) { 

         this.tmpView = new App.Views_2({model: model});      
         $(this.el).append(this.tmpView.render().el); 

        } 
}); 

View 2:

App.Views_2 = Backbone.View.extend({ 

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

    render:   function() {  
         this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
         return this;        
        }, 

    events:   {  
         'click .button' :  'test'     
        }, 

    test:   function() {   
         alert('Fire'); 
        } 

    }); 

}); 

Khi tôi bấm vào ".button" có gì xảy ra. Cảm ơn;

Answer 1

Khi kết thúc phương thức render() của bạn, bạn có thể cho biết xương sống để rebind sự kiện bằng cách sử dụng delegateEvents(). Nếu bạn không vượt qua bất kỳ đối số nào, nó sẽ sử dụng hàm băm sự kiện của bạn.

render:   function() {  
        this.el = $('#template').tmpl(this.model.attributes);  // jQuery template       
        this.delegateEvents(); 
        return this;        
       } 

Answer 2

Tính đến Backbone.js v0.9.0 (30 Tháng 1 2012), có phương pháp setElement để chuyển đổi một yếu tố quan điểm và quản lý đoàn sự kiện.

render: function() { 
    this.setElement($('#template').tmpl(this.model.attributes)); 
    return this; 
} 

Backbone.View setElement: http://backbonejs.org/#View-setElement

setElementview.setElement (element)

Nếu bạn muốn áp dụng một cái nhìn Backbone để một phần tử DOM khác nhau, sử dụng setElement, mà sẽ cũng tạo tham chiếu $ el được lưu trong bộ nhớ cache và di chuyển các sự kiện được ủy quyền của khung nhìn từ phần tử cũ sang phần tử mới.

động tạo ra quan điểm của mình trong thời trang này đã thật ưu và nhược điểm, mặc dù:

Ưu điểm:

• Tất cả các đánh dấu HTML ứng dụng của bạn sẽ được tạo ra trong các mẫu, vì các phần tử gốc của Views đều được thay thế bằng đánh dấu được trả về từ kết xuất. Điều này thực sự tốt đẹp ... không tìm kiếm HTML bên trong JS nữa.
• Tách mối quan tâm tốt đẹp. Các mẫu tạo ra 100% đánh dấu HTML. Chế độ xem chỉ hiển thị các trạng thái của đánh dấu đó và phản hồi các sự kiện khác nhau.
• Việc hiển thị chịu trách nhiệm tạo toàn bộ khung nhìn (bao gồm phần tử gốc) phù hợp với cách ReactJS hiển thị các thành phần, vì vậy đây có thể là bước có lợi trong quá trình di chuyển từ Backbone.Views sang ReactJS components .

Nhược điểm:-đây là những chủ yếu là không đáng kể

• này sẽ không được một sự chuyển tiếp không đau để thực hiện trên một cơ sở mã hiện có. Các lượt xem sẽ cần được cập nhật và tất cả các mẫu sẽ cần phải có các phần tử gốc của Chế độ xem được bao gồm trong đánh dấu.
  • Mẫu được sử dụng bởi nhiều chế độ xem có thể có một chút lông - Phần tử gốc có giống hệt nhau trong tất cả các trường hợp sử dụng không?
• Trước khi kết xuất được gọi, phần tử gốc của chế độ xem là vô ích. Mọi sửa đổi đối với nó sẽ bị vứt bỏ.
  • Điều này sẽ bao gồm các chế độ xem lớp học/dữ liệu của cha mẹ trên các yếu tố chế độ xem con trước khi hiển thị. Thực tiễn không tốt để thực hiện điều này, nhưng điều đó xảy ra - những sửa đổi đó sẽ bị mất khi hiển thị ghi đè phần tử.
• Trừ khi bạn ghi đè hàm tạo Backbone.View, mỗi lần xem sẽ không cần ủy quyền cho sự kiện và đặt thuộc tính thành phần tử gốc được thay thế trong khi hiển thị.
• Nếu một trong các mẫu của bạn phân giải thành danh sách các phần tử thay vì một phần tử gốc đơn chứa trẻ em, you're going have a bad time. setElement sẽ lấy phần tử đầu tiên từ danh sách đó và vứt phần còn lại.
  • Dưới đây là một ví dụ về vấn đề đó, mặc dù: http://jsfiddle.net/CoryDanielson/Lj3r85ew/
  • Vấn đề này có thể được giảm nhẹ thông qua một nhiệm vụ xây dựng mà phân tích các mẫu và đảm bảo họ giải quyết một yếu tố duy nhất, hoặc bằng cách ghi đè setElement và đảm bảo rằng đến element.length === 1.