Emettendo javascript dai modelli jQuery

Question

Voglio emettere alcuni JS dai modelli jQuery, ad esempio ho un modello come

<script id="tmplID" type="text/x-jQuery-tmpl">
<input id="static.${val}" type="text"/>
<input id = "static2.${val}" type="text"/>
<script type="text/javascript">
$('#static.'+${val}).change(function(){
  alert('some value');
});
</script>
</script>  

Quando chiamo questo modello come:

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

Rende la funzione di modifica JavaScript come stringa sulla pagina, mentre voglio che sia aggiunta come JavaScript eseguibile.

Answer 1

Ci sono più problemi con il tuo codice.

Prima di tutto, dovresti mai Usa nidificato <script> Tag. Anche se la chiusura </script> TAG è all'interno di una stringa in un blocco JavaScript, dovresti comunque dividerlo in modo che non appaia così com'è e inciamperà anche i browser conformi alla maggior parte degli standard. Per non parlare di quelli più vecchi ...

Allo stesso modo, dovresti evitare di usare punti in ID, poiché è molto facile da trascurare quando si scrive i selettori jQuery. #id.something significa "Seleziona l'elemento con l'ID id che ha anche la classe something applicato ad esso ". Se non puoi vivere senza di essa, puoi sfuggirlo quando scrivi il tuo selettore come #id\\.something, che sarà "Seleziona l'elemento con l'ID id.something".

È anche una cattiva idea mettere JavaScript nel tuo modello, dovresti ripensare a ciò che stai cercando di ottenere. C'è quasi sempre un modo per aggirarlo:

• Puoi vincolare i tuoi eventi con .delegate() o .live() agli elementi che creerai solo in futuro.

• Invece di codificare duramente l'ID nello script, è possibile utilizzare diversi selettori, ad esempio, è possibile applicare una classe univoca da utilizzare con gli attacchi di cui sopra in modo che non interferisca con il markup esistente. Se hai bisogno dell'ID all'interno del gestore di eventi, puoi facilmente estrarlo con this.id o $(this).attr('id').

• Se vuoi personalizzare 'some value' Nel tuo script, puoi aggiungere attributi personalizzati ai tuoi elementi, ad esempio <input id="static_something" data-custom="some value" /> ed estrarlo nella tua funzione usando $(this).data('custom').

Tenendo conto di tutto quanto sopra, riscriverei il tuo codice su qualcosa di simile a questo:

<script id="tmplID" type="text/x-jquery-tmpl">
<input id="static_${val}" class="templateinput" type="text" data-custom="value1" />
<input id="static2_${val}" class="templateinput" type="text" data-custom="value2" />
</script>

<script type="text/javascript">
// jQuery ready function
$(function(){
    $('.templateinput').live('change', function(){
        var element_id = this.id;
        var element_data = $(this).data('custom');

        alert('The value of input #' + element_id + ' is: ' + element_data);
    });
});
</script>

Se hai un contenitore noto che conterrà tutti gli elementi del modello, usa .delegate() invece per chiarezza per evitare il legame globale.

Answer 2

Non potresti semplicemente impostare l'evento dopo aver reso il modello?

var obj = {val:'123'};
$('#tmplID').tmpl(obj).appendTo("some_container");

$('#static.'+obj.val).change(function() {
    ...
});