Javascript à partir de modèles émettant jQuery

Question

Je veux émettre quelques js de jQuery modèles je modèle par exemple comme

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

comme je l'appelle ce modèle:

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

elle rend la fonction de changement JavaScript sous forme de chaîne sur la page alors que je veux qu'il soit ajouté comme JavaScript exécutable.

Answer 1

Il y a plusieurs problèmes avec votre code.

Tout d'abord, vous devez jamais utiliser des balises imbriquées <script>. Même si la balise </script> de fermeture est à l'intérieur d'une chaîne dans un bloc javascript vous devriez toujours le diviser de sorte qu'il ne semble pas aussi est, comme il pouvait et se déclenchera même les normes les plus navigateurs conformes. Sans parler les plus grands ...

De même, vous devriez éviter d'utiliser des points dans les ID, car il est très facile d'oublier lors de l'écriture de vos sélecteurs jQuery. des moyens de #id.something « sélectionnez l'élément avec le id id qui a également something de classe appliquée à elle » . Si vous ne pouvez pas vivre sans elle, vous pouvez y échapper lors de l'écriture de votre sélection comme #id\\.something, qui « sélectionnez l'élément avec l'id id.something » .

Il est aussi une mauvaise idée de mettre javascript dans votre modèle, vous devez repenser ce que vous essayez d'atteindre. Il y a presque toujours un moyen de contourner:

• Vous pouvez lier vos événements avec .delegate() ou .live() aux éléments que vous ne créer à l'avenir.

• Au lieu de coder en dur l'ID dans le script, vous pouvez utiliser des sélecteurs différents, par exemple vous pouvez appliquer une classe unique d'utiliser les liaisons ci-dessus afin de ne pas interférer avec le balisage existant. Si vous avez besoin de l'ID dans le gestionnaire d'événements, vous pouvez facilement extraire avec this.id ou $(this).attr('id').

• Si vous voulez personnaliser 'some value' dans votre script, vous pouvez ajouter des attributs personnalisés à vos éléments, par exemple <input id="static_something" data-custom="some value" /> et l'extraire dans votre fonction à l'aide $(this).data('custom').

Compte tenu de tous ce qui précède en compte, je récrire votre code à quelque chose de similaire à ceci:

<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 vous avez un conteneur connu qui contiendra tous les éléments de votre modèle, utilisez .delegate() à la place pour plus de clarté pour éviter une liaison globale.

Answer 2

Impossible vous configurez simplement l'événement après avoir rendu le modèle?

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

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