Jquery 模板 : One parent container, 很多 child 吗？

Question

使用 jquery 模板，我想创建一个列表。我想要一位家长 <ul />多个元素<li />元素，导致:

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

我的数据与此类似:

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

目前， child <li />模板如下所示:

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

为了获得我想要的结果，我目前正在这样做:

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

但这只体现了 Jquery 模板的一半精神。我不想对我的标记执行任何字符串版本(如上所述)。

相反，有谁知道 parent <ul /> 是什么？ Jquery 模板可能是什么样子？

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/处看到一个工作示例。