Если вы планируете выполнять интенсивные задачи AJAX, такие как добавление новых записей, редактирование их на лету и т. Д., Тогда я предлагаю вам загрузить пустую страницу, которая вызывает скрипт, который возвращает массив словарей от JSONи затем с помощью системы Template (бета), реализованной недавно в jQuery, или самостоятельно внедрите ее, имея скрытый элемент, с тегами spans / divs / tds, помеченными классами, и клонируйте и заполняйте его каждый раз, когда создаете новыйзапись поступила.
С другой стороны, если вы собираетесь сохранять статичность, просто используйте HTML.
Вот как я управляю шаблонами.Это эффективный способ, поскольку элементы DOM существуют в дереве DOM, и клонирование обходится дешевле, чем анализ строки, содержащей элементы.
<html>
<head>
<script type="text/javascript">
$(function() {
$contactTemplate = $("#contact_template")
function makeContactElement(data) {
var $newElem = $contactTemplate.clone(true)
$newElem.attr("data-id", data.id)
$newElem.find(".name").text( data.firstName + " " + data.lastName )
for(var i in data.info) {
$newElem.find(".info").append( makeInfoElement(data.info[i]) )
}
return $newElem
}
$infoTemplate = $("#info_template")
function makeInfoElement(data) {
var $newElem = $infoTemplate.clone(true)
$newElem.find("infoLabel").text(info.label)
$newElem.find("infoPiece").text(info.piece)
return $newElem
}
$.getJSON('/foo.bar', null, function(data) {
for(var i in data) {
$("#container").append( makeInfoElement(data[i]) )
}
})
})
</script>
<style type="text/css">
.template { display: none; }
</style>
</head>
<body>
<div id="container">
</div>
<!-- Hidden elements -->
<div id="contact_template" class="contact template">
<a rel="123" class="name"></a>
<div class="info"></div>
</div>
<div id="info_template" class="template">
<div class="infoLabel"></div>
<div class="infoPiece"></div>
</div>
</body>
</html>
Затем, когда вы создаете новую запись, просто заполнитеобъект данных с информацией, и вы будете уверены, что весь поток элементов будет общим.
Использование .clone(true) открывает дверь для создания общих событий вместо привязки живого события, что более дорого.
Например, если вы хотите сделать кнопку для удаления записи:
<script ...>
...
$("#contact_template .delete").click(function() {
var id = $(this).parents("contact").attr("data-id")
$.post('/foo.bar', { action: delete, id: id }, function() { ... })
return false
})
</script>
...
<div id="contact_template" class="contact template">
<a href="#" class="delete">Delete</a>
</div>
Удачи!