Ich verwende das Backbone-Boilerplate, um meine Vorlagen zu rendern. Die fetchTemplate-Methode speichert die gerenderten Vorlagen im Cache.
Ich möchte gerne zusätzlichen Code auf dem gerenderten Inhalt ausführen, z. B. Akkordeons initialisieren usw., aber dies mit einer asynchron kompilierten Vorlage ist schwieriger als gedacht.
Hier ist ein Beispiel:
Duel.Views.Home = Backbone.View.extend({
template: "/templates/duel_home.jade",
render: function() {
var view = this;
statusapp.fetchTemplate(this.template, function(tmpl) {
$(view.el).html( tmpl({duels: view.collection.toJSON()}) );
view.postrender();
});
return this;
},
postrender: function() {
$('#duel-new').each(function() {
console.log('Etwas gefunden')
});
}
});Neben dem oben Genannten verwende ich einen View-Handler, wie unter http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ dargestellt.
Dafür mache ich etwas wie
var view = Duel.Views.Home({model: mymodel})
viewHandler('#content').showView(view)dies ruft
$('#content').html(view.render().el)Aber wenn die Vorlage noch nicht im Cache ist, wird zuerst render aufgerufen, und postrender wird rechtzeitig aufgerufen. Andererseits, wenn die Vorlage bereits im Cache ist, wird die Vorlage sofort gerendert, postrender wird aufgerufen, aber view.el ist noch nicht in das DOM eingefügt worden, daher ist $(this.el) eine leere Liste und $('#duel-new').each() ist "leer".
Natürlich könnte ich die postrender-Methode nach dem Aufruf von viewHandler's render hinzufügen, aber das führt zu demselben Problem, jedoch beim ersten Aufruf der render-Methode. Da die Vorlage noch nicht kompiliert ist, wird postrender aufgerufen, bevor ihre Elemente existieren würden, daher könnten keine Handler für diese noch nicht vorhandenen Elemente definiert werden.
Ideen, wie man dieses Problem richtig überwinden kann? Es ist relativ einfach für einfache Klick-Ereignisse mit z.B. .on, aber was ist mit allgemeineren Strukturen wie $('#tabs').tabs() zum Beispiel?
Meine fetchTemplate-Funktion sieht wie folgt aus:
fetchTemplate: function(path, done) {
window.JST = window.JST || {};
// Sollte eine sofortige synchrone Möglichkeit bieten, um die Vorlage zu erhalten, wenn sie im JST-Objekt vorhanden ist.
if (JST[path]) {
return done(JST[path]);
}
// Lade sie asynchron, wenn sie nicht im JST verfügbar ist
return $.get(path, function(contents) {
var tmpl = jade.compile(contents,{other: "locals"});
JST[path] = tmpl;
return done(tmpl);
});
},
