Emitir JavaScript de JQuery Templates

Question

Quiero emitir algunas JS de JQuery Plantlates, por ejemplo, tengo una plantilla como

<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>  

Cuando llamo a esta plantilla como:

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

Rendera la función de cambio de JavaScript como cadena en la página, mientras que quiero que se agregue como JavaScript ejecutable.

Answer 1

Hay múltiples problemas con su código.

En primer lugar, deberías nunca Usar anidadas <script> Etiquetas. Incluso si el cierre </script> La etiqueta está dentro de una cadena en un bloque JavaScript, aún debe dividirlo para que no aparezca lo que sea, como podría y se tropezará incluso con los navegadores más compatibles con los estándares. Sin mencionar los mayores ...

Del mismo modo, debe evitar usar puntos en IDS, ya que es muy fácil pasar por alto al escribir sus selectores jQuery. #id.something medio "Seleccione el elemento con la ID id que también tiene clase something aplicado a él ". Si no puede vivir sin él, puede escapar de él al escribir su selector como #id\\.something, que lo hará "Seleccione el elemento con la ID id.something".

También es una mala idea poner a JavaScript dentro de su plantilla, debe repensar lo que está tratando de lograr. Casi siempre hay una forma de evitarlo:

• Puedes vincular tus eventos con .delegate() o .live() a elementos que solo creará en el futuro.

• En lugar de codificar la ID en el script, puede usar diferentes selectores, por ejemplo, puede aplicar una clase única para usar con los enlaces anteriores para que no interfiera con el marcado existente. Si necesita la identificación dentro del controlador de eventos, puede extraerlo fácilmente con this.id o $(this).attr('id').

• Si quieres personalizar 'some value' En su script, puede agregar atributos personalizados a sus elementos, por ejemplo, <input id="static_something" data-custom="some value" /> y extraerlo en su función usando $(this).data('custom').

Teniendo en cuenta todo lo anterior, reescribiría su código a algo similar a esto:

<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>

Si tiene un contenedor conocido que contendrá todos sus elementos de plantilla, use .delegate() En cambio, para mayor claridad para evitar la unión global.

Answer 2

¿No podrías configurar el evento después de representar la plantilla?

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

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