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

How can I copy from a template node and fill with json data and append them to the document with javascript?

本文关键字：javascript 文档 并用 模板节点 复制 数据 json 填充      更新时间：2023-09-26

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

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

另外，

节点可能绑定了一些点击事件，我想要新的节点动作。

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

你必须这样修改你的模板:

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

然后像这样渲染:

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

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

是jQuery的快速指南。看看我的幻灯片或我的报告吧。

如果你想绑定事件，要么在你将渲染模板添加到DOM后绑定它们，要么使用live或delegate。

相关文章：