javascript - 如何从模板节点复制并填充 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"}]

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

此外，

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

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 .

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