eventi backbone.js ed el

Question

Ok, quindi ho letto diverse altre domande relative alle visualizzazioni di Backbone e agli eventi non attivati, tuttavia non lo sto ancora purtroppo facendo. Ho lavorato con Backbone per circa un giorno, quindi sono sicuro che mi manca qualcosa di base. Ecco un jsfiddle con quello che sto lavorando 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); 

L'evento okay sul GridView non scatta, sto assumendo perché div.grid-view non esiste quando l'evento viene prima legato. Come devo gestire l'associazione e l'attivazione di un evento creato su una vista in modo dinamico? (Inoltre, si tratta di un breve esempio, ma sentitevi liberi di urlare contro di me se sto facendo qualsiasi altra cosa che non si dovrebbe)

Answer 1

Il tuo problema è che gli eventi in GridView:

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

dicono:

quando si fa clic su un discendente che corrisponde '.grid-view', chiamare okay

Gli eventi sono legati con questo snippet from backbone.js:

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

Quindi l'elemento .grid-view deve essere contenuta nella GridView del this.el e la tua this.el è <div class="grid-view">. Se si cambia il events a questo:

events: { 
    'click': 'okay' 
} 

sentirete le vostre vacche (o "li sente nella vostra mente" dopo aver letto l'avviso a seconda di come pazzo questo problema ha fatto).

violino fisso: http://jsfiddle.net/ambiguous/5dhDW/