Ereignisse werden nicht ausgelöst, wenn die Backbone-Ansicht mit jquery gerendert wird

Question

Ich erhalte den gesamten HTML-Code mit jquery get() -Methode und setze ihn auf die el der Backbone-Ansicht. Die Ansicht wird perfekt gerendert, aber die Klickereignisse sind nicht vorhanden Brennen. Da ich ein Anfänger bin, bin ich nicht in der Lage, das Problem zu finden. Jede Hilfe wäre willkommen.

Die CurrentTabID enthält die Div-ID, auf der ich diese HTML gerendert werden soll.

view.js

var MyFirstView = Backbone.View.extend({ 

    currentTabID:'', 

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

    render: function(){ 
     var self = this; 
     self.el = self.options.currentTabID; 
     $.get('resources/html/myBB.html', function(data) { 
      $(self.el).html(_.template(data)); 
     }); 
     return this; 
    }, 

    events: { 
     'click .savebtnBB': 'invokeME' 
     }, 

    invokeME: function(){ 
     console.log('Fired'); 
    } 
}); 

Html so etwas wie sieht unter

myBB.html

<div id="sample_tab"> 
    <div class="sub-main"> 
     <form> 
     .. 
     </form> 
    </div> 
    <div class="button"> 
     <button class="savebtnBB">click me</button> 
    </div> 
</div> 

Answer 1

view.el ist ein tatsächliches dom Element, das die Ereignis-Listener für Ihre Ansicht halten . Sie ersetzen den Verweis der Ansicht auf dieses Element durch eine Nummer und hängen die Vorlage an ein anderes Element an.

Ihre Ansicht sollte so viel wie möglich wie eine isolierte Einheit funktionieren. Ihr Code zum Anhängen an etwas anderes sollte sich außerhalb der Ansicht befinden, in der Sie sie erstellen. Ihr Code sollte ungefähr wie folgt aussehen:

var MyFirstView = Backbone.View.extend({ 
    initialize: function() { 
    var self = this; 
    $.get('resources/html/myBB.html', function(html) { 
     self.template = _.template(html); 
     this.render(); 
    }); 
    }, 
    events: { 
    'click .savebtnBB': 'invokeME' 
    }, 
    render: function() { 
    this.$el.html(this.template({ /*some data for template*/ })); 
    }, 
    invokeME: function() { 
    console.log('Fired'); 
    } 
}); 

var viewInstance = new MyFirstView(); 

/*append to whatever you want*/ 
$(currentTabID).append(viewInstance.el);