Как я могу скопировать из узла шаблона и заполнить данными 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 посмотрите мои слайды или мою презентацию .

Если вы хотите связать события, либо связывайте их после добавления обработанного шаблона в DOM, либо используйте live или delegate.