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

In some case, I need to copy from a node template and fill some fields of the node with json data. How can I do that? For example in HTML file I have written such a template:

在某些情况下，我需要从节点模板复制并使用json数据填充节点的某些字段。我怎么做呢?例如在HTML文件中，我写了这样一个模板:

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

and my json data is

我的json数据是

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

and I want to generate three nodes and append them to the document.

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

Also, the

此外,

node maybe binded with some click event and I want the new node actions too.

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

1 个解决方案

#1

You'd be best off using a templating library - my favourite is jQuery.tmpl but there are others.

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

You'd have to modify your template like so:

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

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

then render it like this:

然后渲染成这样:

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

where data is your array. This will create a separate template instance for each member of the array.

数据就是数组。这将为数组的每个成员创建一个单独的模板实例。

For a quick guide to jQuery.tmpl have a look at my slides or my presentation.

来快速浏览一下jQuery。tmpl看一下我的幻灯片或演示文稿。

If you want to bind events, either bind them after you've added the rendered template to the DOM, or use live or delegate.

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

#1