Question

使用jquery模板，我想创建一个列表。我想要一个包含许多<ul />元素的父<li />元素，结果是：

<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模板的精神。我不想做任何我的标记的字符串版本（如上所述）。

相反，有没有人知道父<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/

看到一个有效的例子

Answer 2

jt - 在dave wards encosia中有一个很棒的例子，可以让你在jquery模板上利用漂亮的紧凑组合。把莫西带到：

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

我认为它会让你走上常规而不是配置这类事情的道路，它就是我。

Answer 3

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插入的性能问题是一个好主意。

编辑：现在看另一个答案似乎我误解了这个问题。无论如何，我会在这里留下这个答案，所以人们会看到这种方式，包括评论为什么它不好。

Jquery模板：一个父容器，很多孩子？

3 个答案: