Backbone Ansicht Click-Ereignis nicht

Question

Hier Brennen ist der Code:

var view = Backbone.View.extend({ 
    el:'#comment', 
    template:'', 
    initialize:function(){ 
    this._getTemplate(); 
    this.render(); 
    }, 
    event:{ 
    'click #submit_btn' : 'submit' 
    }, 
    _getTemplate:function(){ 
    $.ajax({ 
     ... 
    }); 
    }, 
    render:function(){ 
    this.$el.html(this.template); 
    }, 
    submit:function(event){ 
    alert('click'); 
    } 
}); 

I Ajax verwenden HTML-Template von Server zu bekommen und es funktioniert gut. Ich habe kein Problem beim Laden der Vorlage.

Hier ist das Div, in das ich die Vorlage einfügen möchte.

<div id="comment">...</div> 

Hier ist die Vorlage. Ich zeige nur die einfache Struktur.

<div>...</div> 
<button id="submit_btn">submit</button> 
<div>...</div> 

Kann mir jemand helfen, es zu lösen?

Answer 1

Das Ereignis nicht ausgelöst, weil, wenn das Ereignis versucht wird, auf das DOM-Element zu binden (das heißt zum Zeitpunkt der Ansicht Bau), das DOM-Element nicht existiert. Vom Backbone docs:

Backbone wird die Ereignis-Listener zum Zeitpunkt der Instanzierung automatisch anhängen, direkt vor dem Aufruf initialisieren.

Da der #submit_btn DOM-Element-Matcher nichts zurückgibt, ist kein Ereignis gebunden.

Ihr Verfahren zum Abrufen der Vorlage innerhalb der initialize() Methode wird problematisch sein. In den meisten OO-basierten Entwicklungsmustern sollte der Konstruktor des Objekts nicht viel arbeiten, und die zurückgegebene Instanz sollte vollständig initialisiert werden, wenn der Konstruktor abgeschlossen ist. Backbone-Ansichten sind in dieser Hinsicht nicht anders. Ihr Konstruktor, wie hier beschrieben, versucht einiges zu tun, aber es bringt keinen Vorteil, die Vorlage als Teil der Objekterstellung hier abzurufen. In der Tat gibt es auch Schaden: Was passiert, wenn Sie mehr als eine Instanz Ihrer View erstellen? Sie würden die Vorlage mehr als einmal abrufen, obwohl der Inhalt genau derselbe wäre.

Das Erzwingen, dass ein XHR irgendeiner Art synchron ist, wird auch problematisch sein. Während einer synchronen Anforderung wartet der Haupt-Thread des Browsers auf die Antwort. Wenn in diesem Beispiel die Vorlage länger als einige hundert Millisekunden dauert, wird Ihre Anwendung für den Benutzer "eingefroren" angezeigt. Dies bietet eine sehr schlechte Benutzererfahrung. Asynchroner Code mag komplexer sein, aber wenn Sie eine JS-basierte Anwendung mit minimaler Komplexität erstellen, müssen Sie sich damit befassen. Da JavaScript (meist) single-threaded ist, wird die asynchrone Ausführung zu einem wesentlichen Werkzeug jeder Anwendung.

Eine bessere Lösung ist es, entweder die Vorlage in den Hosting-HTML-Seite Inhalt einzubetten, oder verwenden, um eine JS Modularisierung Technik (RequireJS, Commonjs, andere), um effektiv die Vorlage zu verpacken mit dem Modul, das es braucht.

Answer 2

Es sieht so aus, als wäre die Ereigniszeichenfolge korrekt eingerichtet und die Renderfunktion macht das Richtige. Das einzige Problem, das ich sehe, ist, dass die "initialisierte" Funktion gemäß der Backbone View Extend-Dokumentation "initialisiert" werden sollte.

Referenz: http://backbonejs.org/#View-extend