如何从模板节点复制并填充json数据并使用javascript将它们附加到文档？

Question

在某些情况下，我需要从节点模板复制并用json数据填充节点的某些字段。我怎样才能做到这一点？例如，在HTML文件中，我编写了这样一个模板：

<div id="template" style="display:none">
    <h1>{{name}}</h1>
    <p>{{content}}</p>
</div>

我的json数据是

[{"name":"A","content":"B"},{"name":"C","content":"D"},{"name":"E","content":"F"}]

我希望生成三个节点并将它们附加到文档中。

此外，

节点可能会绑定一些点击事件，我也想要新的节点操作。

Answer 1

你最好使用模板库 - 我最喜欢的是jQuery.tmpl，但还有其他的。

您必须像这样修改模板：

<script id='template' type='text/x-jquery-tmpl'>
  <h1>${name}</h1>
  <p>${content}</p>
</script>

然后渲染它：

$('#template').tmpl(data).appendTo('body');

其中data是您的数组。这将为数组的每个成员创建一个单独的模板实例。

有关jQuery.tmpl的快速指南，请查看my slides或my presentation。

如果要绑定事件，请在将呈现的模板添加到DOM后绑定它们，或使用live或delegate。