Jqueryテンプレート：1つの親コンテナ、多くの子ですか？

Question

jqueryテンプレートを使用して、リストを作成します。私は、その結果、多くの<li />要素を持つ1つの親​​要素をしたい：

<ul> 
    <li>One</li> 
    <li>Two</li> 
</ul> 

私のデータは次のようになります。

var data = 
[ 
    { val: 'One' }, 
    { val: 'Two' } 
] 

現在、子供<li />テンプレートは次のようになります。

<script id="child-tmpl" type="text/x-jquery-tmpl"> 
    <li> 
     ${val} 
    </li> 
</script> 

結果を得るには、私は現在これをやっています：

$('<ul></ul>').append($("#answer-tmpl").tmpl(data)); 

しかし、これはJqueryテンプレートの精神を半分しか受け入れていません。私は私のマークアップの文字列版を（上記のように）したくありません。

代わりに、誰かが親の内容を知っていますか？​​Jquery Templateの外観は？

Answer 1

代わりのtmplに配列を与え、それをフィールドとして配列を持つオブジェクト与える：

$("#answer-tmpl").tmpl({ data: data }); 

を次にあなたがこのようなあなたのテンプレートを変更することができます。

<script id="answer-tmpl" type="text/x-jquery-tmpl"> 
    <ul> 
    {{each data}} 
    <li> 
     ${val} 
    </li> 
    {{/each}} 
    </ul> 
</script> 

あなたが見ることができます作業例：http://jsfiddle.net/YNm3n/

Answer 2

var data = ['a', 'b', 'c']; 

var list = $('<ul/>'); 
$.each(data, function(idx, val) { 
    $('<li/>').html(val).appendTo(list); 
}); 
$('body').append(list); 

これは文字列表現を含まないジョブです。しかし、あなたの質問のコードはです。より効率的ながあります。すべてのアイテムに対してDOM操作をする必要がないからです。

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctlyのDOM挿入に関するパフォーマンスの問題については、読んでおくことをお勧めします。

編集：他の回答を見ると、質問が間違っているようです。とにかく私はこの回答を残しておきますので、人々はその理由をコメントに含めて見ることができます。

Answer 3

jt - この素晴らしい例は、デイブ・ウォーズのエンコシアで、素晴らしいコンパクト・コンポジションを活用することができます。 jqueryテンプレート。以上にmoseyを取る：私はそれが事のこのタイプに設定より規約のパスにあなたを得るだろうと思います

http://encosia.com/2010/12/02/jquery-templates-composite-rendering-and-remote-loading/

、それは私がやりました。