0

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として追加したい.

4

2 に答える 2

3

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

まず、ネストされたタグを使用しないでください。<script>終了</script>タグが JavaScript ブロック内の文字列内にある場合でも、それを分割してそのまま表示されないようにする必要があります。先輩は言うまでもなく…

同様に、jQuery セレクターを作成するときに見落としやすいため、ID にドットを使用することは避ける必要があります。「クラスも適用されているIDを持つ要素を選択する」#id.somethingことを意味します。それなしでは生きられない場合は、セレクターを のように記述するときにエスケープできます。これにより、「id を持つ要素が選択されます」。idsomething#id\\.somethingid.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()明確にするために代わりに使用して、グローバル バインディングを回避します。

于 2011-06-13T20:19:56.497 に答える
1

テンプレートをレンダリングした後、イベントを設定できませんでしたか?

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

$('#static.'+obj.val).change(function() {
    ...
});
于 2011-06-13T18:58:53.160 に答える