Jquery Templates: One parent container, many children? -

using jquery templates, want create list. want 1 parent <ul /> element many <li /> elements, resulting in:

<ul>   <li>one</li>   <li>two</li> </ul>

my data similar this:

var data = [   { val: 'one' },   { val: 'two' } ]

currently, child <li /> template looks this:

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

to result want, i'm doing this:

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

but half-embraces spirit of jquery templates. don't want string version of markup (as above).

rather, have idea on parent <ul /> jquery template might like?

instead of giving tmpl array, give object has array field:

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

then can modify template this:

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

you can see working example @ http://jsfiddle.net/ynm3n/

Sohocode