2012-12-19 14 views
11

Ich schreibe eine Beispiel-App mit backbone.js.Backbone Render Ansicht auf Modell-Update

Auf Update meines Modells ich meiner Meinung nach auf diese Weise

$('.target').html(""); 
$('.target').append(this.$el.html(this.template(model))) 

Sobald die Ansicht gerendert wieder nach Modell Update [auf Änderungsereignis] erneut machen, Ereignisse der el ‚s Kinder angebracht wird verloren [scheint nicht wie jQuery leben]. Ist das ein bekanntes Problem oder fehlt mir etwas? Sollte ich versuchen, HTML anstelle von append zu ersetzen? fiddle

+0

Vielleicht möchten Sie Ihre Geige reparieren, so dass sie läuft. z.B. mit jQuery und einschließlich Underscore und Backbone sowie –

+1

benötigen Sie nicht zwei Anweisungen. Benutze einfach eins: '$ ('. Target') .html (this. $ El.html (this.template (model))) ', was dem Löschen des HTML-Codes und dem Hinzufügen eines neuen – Matanya

+0

@Mike Fielden Then I entspricht Vielleicht müssen Sie meine gesamte App setzen: DI dachte, die Ansicht würde ausreichen, um mein Problem zu verstehen – Tamil

Antwort

10

Sobald sich die Ansicht im DOM befindet, müssen Sie sie nicht mehr entfernen und anhängen. Ich denke, der einfachste Weg, dies zu bewältigen, besteht darin, die DOM-Einfügung vollständig aus der Ansicht zu entfernen und den Anrufer von view.render dafür sorgen zu lassen.

Ausblick:

render: function() { 
    this.$el.html(this.template(model)); 
    return this; 
} 

Caller (auf machen zuerst):

var view = new SomeView(); 
$('.target').append(view.render().el); 

Bei nachfolgendem macht:

view.render(); 

Nach dem Blick in DOM gemacht wurde, kann sie behalten glücklich Erneutes Rendern, ohne etwas über Elternansichten wissen zu müssen. Die Ereignisbindungen sollten auch zwischen den Renderings intakt bleiben.

+0

Aber append würde den gleichen Inhalt zweimal oder so oft hinzufügen ich aktualisieren mein Modell Ritus coz 'append' statt ersetzen? – Tamil

+1

@Tamil der Punkt ist, dass Sie es nur einmal anhängen, wenn Sie möchten, dass die Ansicht zuerst angezeigt wird. Danach reicht es, 'render' in der Ansicht aufzurufen, weil' view. $ El' bereits im DOM ist. Ich habe meine Antwort aktualisiert, um Klarheit zu schaffen. Aber ja, '$ .replaceWith' oder jede andere Art würde das gleiche Ergebnis haben. – jevakallio

+0

@fenciff Ich wusste das nicht :) Es funktionierte wirklich gut :) – Tamil

Verwandte Themen