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

【问题标题】：How can I copy from a template node and fill with json data and append them to the document with javascript?如何从模板节点复制并填充 json 数据并使用 javascript 将它们附加到文档中？
【发布时间】：2011-08-23 14:32:46
【问题描述】：

在某些情况下，我需要从节点模板复制并用 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"}]

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

另外，

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

【问题讨论】：

标签： javascript html json templates

【解决方案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。

【讨论】：