backbone.js events y el

Question

Bien, entonces he leído varias otras preguntas con respecto a las vistas de la red troncal y los eventos que no se activan, sin embargo, todavía no lo estoy recibiendo con tristeza. He estado jugando con Backbone por alrededor de un día, así que estoy seguro de que me estoy perdiendo algo básico. He aquí una jsFiddle con lo que estoy trabajando con: 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); 

El okay evento en el GridView no se dispara, estoy asumiendo porque div.grid-view no existe cuando el evento se une primero. ¿Cómo debo manejar el enlace y la activación de un evento que se basa dinámicamente en una vista? (Además, es un ejemplo corto, pero no dude en gritar a mí si estoy haciendo cualquier otra cosa que no debería)

Answer 1

Su problema es que los eventos en GridView:

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

dicen:

cuando se hace clic en un descendienteque coincide con '.grid-view', llame okay

se vinculen con este snippet from backbone.js:

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

Así el elemento .grid-view tiene que estar contenida en la GridView de this.el y su this.el es <div class="grid-view">. Si cambia de events a esto:

events: { 
    'click': 'okay' 
} 

oirá sus vacas (o "oye en su mente" después de leer la alerta dependiendo de cómo está loco este problema se ha hecho).

violín fijo: http://jsfiddle.net/ambiguous/5dhDW/