jQueryテンプレートからJavaScriptを発します

Question

jqueryテンプレートからいくつかのJSを放出したいのです。

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

このテンプレートを次のように呼ぶとき：

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

JavaScriptの変更関数をページ上の文字列としてレンダリングしますが、実行可能なJavaScriptとして追加したいと考えています。

Answer 1

コードには複数の問題があります。

まず第一に、あなたはすべきです 一度もない ネストされたものを使用します <script> タグ。たとえ閉鎖であっても </script> タグは、JavaScriptブロック内の文字列内にあり、それを分割する必要があります。そうでないように表示されません。古いものは言うまでもありません...

同様に、JQueryセレクターを書くときは非常に簡単に見落とすことができるため、IDでドットの使用を避ける必要があります。 #id.something 意味 「IDで要素を選択します id クラスもあります something それに適用される」. 。あなたがそれなしでは生きられないなら、あなたはあなたのセレクターを次のように書くときにそれを逃れることができます #id\\.something, 、それはそうします 「IDで要素を選択します id.something".

また、JavaScriptをテンプレート内に入れることも悪い考えです。達成しようとしていることを再考する必要があります。ほとんどの場合、それを回避する方法があります：

• イベントをバインドできます .delegate() また .live() 将来だけ作成する要素に。

• スクリプト内のIDをハードコーディングする代わりに、さまざまなセレクターを使用できます。たとえば、既存のマークアップを妨げないように、上記のバインディングで使用する一意のクラスを適用できます。イベントハンドラー内にIDが必要な場合は、簡単に抽出できます this.id また $(this).attr('id').

• カスタマイズしたい場合 'some value' スクリプトでは、要素にカスタム属性を追加できます。 <input id="static_something" data-custom="some value" /> 使用して関数に抽出します $(this).data('custom').

上記のすべてを考慮に入れて、私はあなたのコードをこれに似たものに書き直します。

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

すべてのテンプレートアイテムを含む既知のコンテナがある場合は、使用してください。 .delegate() 代わりに、グローバルな拘束力を避けるために明確にします。

Answer 2

テンプレートをレンダリングした後、イベントをセットアップできませんか？

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

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