2011-08-09 11 views
1

私はN個のラジオボタンを持つjqueryテンプレートを持っていて、外部のhtmlファイルからテンプレートをロードした後に(jQuery.tmpl()メソッドを使って)値を持つラジオボタンを選択する必要があります。複数の{{if}}文、{{else}}文、重複するコードとセレクタを使わずに、テンプレート内のラジオボタンを選択する良い方法はありますか?あなたが希望ラジオの価値を持っている場合はjquery templatesの選択

答えて

3

データはどのような形式でサーバーから戻ってきますか? JSON配列の場合は、このようなことができますか?

HTML:

<script id="myTemplate" type="text/html"> 
    <input type="radio" value="${value}"{{if selected}} checked{{/if}}>${name}</input><br /> 
</script> 

<div id="myDiv"> 
</div> 

のjavascript:

var myData = [ 
    {name: 'test 1', value : 'radio1', selected : false}, 
    {name: 'test 2', value : 'radio2', selected : false}, 
    {name: 'test 3', value : 'radio3', selected : true}, 
    {name: 'test 4', value : 'radio4', selected : false} 
]; 

$('#myTemplate').tmpl(myData).appendTo('#myDiv'); 

http://jsfiddle.net/JbTwB/1/

1

、あなたのような何かができる:

jInstance.find('input[value=' + desiredValue + ']').attr('checked', true); 

これはjInstanceは、テンプレートの新規作成されたコピーであり、かつdesiredValueことを正確の値と一致していることを前提としていラジオボタンを選択してください。

値の一部しかわからない場合は、その入力をターゲットにするために使用できる他のjQueryセレクタがあります。

より一般的な「フォームの事前充填」ルーチンをお探しの場合は、プリフィル値のセットとそのフォーマットからテンプレートへのマッピングを保存するための何らかの形式を確立する必要があります。しかし、それは実行することができますが、必ずしもそれほど難しいとは限りません。

+0

私はセレクタなしで書きました!私はテンプレート(ビュー)の大きな数をロードする大きすぎるファイル(コントローラ)があり、私は冗長なセレクタを削除しようとしています。 – 2xMax

+0

DOM要素を操作するには、ノードへの参照を取得する必要があります。その参照を生成するには、ID(最速ですが、一意性の制約が付いています)、またはより一般化されたセレクターが必要です。おそらく正規表現を使ってマークアップを巨大な文字列として扱いたいのでない限り。ひどい出来事は非常に脆弱です。セレクタを使用すると、重複したコードとたくさんの 'if/else'ブロックの使用を避けることができます。 – Tom

+0

おそらく、テンプレート要求内のサーバーに必要な値のセットを渡すことができ、サーバーは応答が送信される前に生成されたマークアップを変更できます。しかし、そのアプローチはjavascriptベースではないので、答えを得るために質問に再度タグを付ける必要があります。 – Tom