sự kiện backbone.js và el

Question

Được rồi, vì vậy tôi đã đọc một số câu hỏi khác liên quan đến quan điểm của Backbone và các sự kiện không bị sa thải, tuy nhiên tôi vẫn không nhận được nó buồn bã. Tôi đã rối tung với Backbone khoảng một ngày, vì vậy tôi chắc chắn rằng tôi đang thiếu một cái gì đó cơ bản. Dưới đây là một jsfiddle với những gì tôi đang làm việc với: http://jsfiddle.net/siyegen/e7sNN/3/

(function($) { 

    var GridView = Backbone.View.extend({ 
     tagName: 'div', 
     className: 'grid-view', 
     initialize: function() { 
      _.bindAll(this, 'render', 'okay'); 
     }, 
     events: { 
      'click .grid-view': 'okay' 
     }, 
     okay: function() { 
      alert('moo'); 
     }, 
     render: function() { 
      $(this.el).text('Some Cow'); 
      return this; 
     } 
    }); 

    var AppView = Backbone.View.extend({ 
     el: $('body'), 
     initialize: function() { 
      _.bindAll(this, 'render', 'buildGrid'); 
      this.render(); 
     }, 
     events: { 
      'click button#buildGrid': 'buildGrid' 
     }, 
     render: function() { 
      $(this.el).append($('<div>').addClass('gridApp')); 
      $(this.el).append('<button id="buildGrid">Build</button>'); 
     }, 
     buildGrid: function() { 
      var gridView = new GridView(); 
      this.$('.gridApp').html(gridView.render().el); 
     } 

    }); 

    var appView = new AppView(); 

})(jQuery); 

Sự kiện okay trên GridView không chớp, tôi giả sử vì div.grid-view không tồn tại khi sự kiện là ràng buộc đầu tiên. Tôi nên xử lý sự ràng buộc và kích hoạt của một sự kiện được xây dựng trên một khung nhìn động như thế nào? (Ngoài ra, nó là một ví dụ ngắn, nhưng cảm thấy tự do để la mắng tôi nếu tôi đang làm bất cứ điều gì khác mà tôi không nên)

Answer 1

Vấn đề của bạn là sự kiện trên GridView:

events: { 
    'click .grid-view': 'okay' 
} 

nói:

khi bạn click vào một hậu duệ phù hợp '.grid-view', gọi okay

Các sự kiện đang bị ràng buộc với snippet from backbone.js này:

if (selector === '') { 
    this.$el.on(eventName, method); 
} else { 
    this.$el.on(eventName, selector, method); 
} 

Vì vậy, các yếu tố .grid-view phải được chứa trong GridView của bạn this.el và this.el của bạn là <div class="grid-view">. Nếu bạn thay đổi events của bạn như thế này:

events: { 
    'click': 'okay' 
} 

bạn sẽ nghe thấy con bò của bạn (hoặc "nghe họ trong tâm trí của bạn" sau khi đọc báo tùy thuộc vào cách điên vấn đề này đã làm cho bạn).

Đã sửa lỗi: http://jsfiddle.net/ambiguous/5dhDW/