Zwischenspeicher für das DOM und bindende Klickereignisse für Elemente, die noch nicht gerendert wurden

Question

"Stabile Anwendungsentwicklung erfordert die strikte Organisation des Codes in klare 'Blöcke'."

Zu diesem Zweck verwende ich Moustache, um Daten aus meinen Skripten in meine HTML zu rendern.

ich meinen Schnurrbart Vorlagen in speziellen Script-Tags am Speicherung:

<script id="template" type="text/template"> 
    Mustache template goes here and is invisible 
</script> 

die Vorlage zu machen in einem div ich einfach das Schnurrbart-Funktion Jetzt

var template = $('#template').html(); 
$('#someDiv').html(Mustache.render(template)); 

machen rufen vorstellen, ich möchte ein binden Klicken Sie auf ein Element in einer Moustache-Vorlage oder cachen Sie die Elemente, die ich später verwenden werde ... Das kann ich beim Laden der Seite natürlich nicht tun, weil die Vorlage noch nicht gerendert wurde.

Um das Ereignis zu arbeiten, muss ich ein Ereignis nur nach deklarieren Ich habe das HTML gerendert. Um ein Element zu verwenden, muss ich es manuell auswählen, wenn es z.B. $('.foo')this.foo

Die Konsequenz ist, dass ich jetzt auf ('klicken Sie auf) Events und jQuery Selections überall in meinem Objekt und nicht in den bindEvents und cacheDOM Funktionen gestreut haben.

Hier ist eine Geige mit einem vereinfachten Beispiel für das Problem: https://jsfiddle.net/6L2ry6hr/

Im obigen Beispiel nicht zu schlecht ist ... aber wie mein apps komplexe bekommen ist es ein wenig umständlich zu werden.

Answer 1

Jetzt stelle ich mir ein Click-Ereignis auf ein Element in einem Schnurrbart Vorlage

Ich kann binden wollen natürlich nicht, dass Belastung auf Seite tun, weil die Vorlage noch nicht wiedergegeben wird.

Die Anforderung ist mit jQuery möglich. Die .innerHTML eines <script> Element angebracht ist mit einem Ereignis und Ereignishandler jQuery() geben werden.

jQuery.holdReady(true); 
var template = jQuery($("#template").html()); 
// template.filter("element").on("event", function() {// do stuff}) 
jQuery("body").append(template); 
jQuery.holdReady(false); 
jQuery(function() { 
    // do stuff 
})