JavaScript aus JQuery -Vorlagen ausgeben

Question

Ich möchte ein paar JS von JQuery -Vorlagen ausgeben, z. B. habe ich Vorlage wie

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

Wenn ich diese Vorlage nenne wie:

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

Es macht die Funktion JavaScript Change als Zeichenfolge auf der Seite, während ich möchte, dass sie als ausführbares JavaScript angehängt wird.

Answer 1

Es gibt mehrere Probleme mit Ihrem Code.

Zuallererst sollten Sie noch nie Verwenden Sie verschachtelt <script> Stichworte. Auch wenn das Schließen </script> Tag befindet sich in einer Zeichenfolge in einem JavaScript -Block. Sie sollten ihn immer noch aufteilen, damit er nicht so erscheint, wie er auch die meisten standardmäßig konformen Browser stolpern kann und wird. Ganz zu schweigen von den älteren ...

In ähnlicher Weise sollten Sie es vermeiden, Punkte in IDs zu verwenden, da es beim Schreiben Ihrer JQuery -Selektoren sehr einfach zu übersehen ist. #id.something meint "Wählen Sie das Element mit der ID aus id das hat auch Klasse something darauf angewendet "". Wenn Sie nicht ohne es leben können, können Sie ihm entkommen, wenn Sie Ihren Selektor schreiben, wie #id\\.something, welches wird "Wählen Sie das Element mit der ID aus id.something".

Es ist auch eine schlechte Idee, JavaScript in Ihre Vorlage zu stecken. Sie sollten überdenken, was Sie erreichen möchten. Es gibt fast immer einen Weg:

• Sie können Ihre Ereignisse mit binden .delegate() oder .live() zu Elementen, die Sie nur in Zukunft schaffen werden.

• Anstatt die ID im Skript fest zu kodieren, können Sie verschiedene Selektoren verwenden, z. B. können Sie eine eindeutige Klasse anwenden, um die oben genannten Bindungen zu verwenden, damit das vorhandene Markup nicht beeinträchtigt wird. Wenn Sie die ID im Ereignishandler benötigen, können Sie sie problemlos mit der ID extrahieren this.id oder $(this).attr('id').

• Wenn Sie anpassen möchten 'some value' In Ihrem Skript können Sie Ihren Elementen benutzerdefinierte Attribute hinzufügen, z. B. <input id="static_something" data-custom="some value" /> und extrahieren Sie es in Ihrer Funktion verwenden $(this).data('custom').

Unter Berücksichtigung all dieser Berücksichtigung würde ich Ihren Code in etwas ähnlich wie folgt überschreiben:

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

Wenn Sie einen bekannten Container haben, der alle Ihre Vorlagenelemente enthält, verwenden Sie .delegate() Stattdessen für Klarheit, um globale Bindung zu vermeiden.

Answer 2

Könnten Sie das Ereignis nicht einfach einrichten, nachdem Sie die Vorlage gemacht haben?

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

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