Se stai pianificando di eseguire attività AJAX intensive, aggiungendo nuovi record, modificandoli al volo, ecc., Ti suggerisco di caricare una pagina vuota, che chiama uno script che restituisce una serie di dizionari per JSON, e quindi usando il sistema Template (beta) implementato recentemente in jQuery, oppure implementalo tu stesso, avendo un elemento nascosto, con spans/div/tds taggati con classi, e clonandolo e riempiendolo ogni volta che arriva un nuovo record.
D'altra parte, se hai intenzione di mantenere questa statica, basta usare HTML.
Ecco come gestisco il template. Questo è un modo efficiente perché gli elementi DOM esistono nella struttura DOM e la clonazione è meno costosa dell'analisi di una stringa che contiene gli elementi.
<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>
Poi, quando si crea un nuovo record, basta compilare un oggetto di dati con le informazioni, e sarete sicuri che tutto il flusso elemento sarà generico.
L'utilizzo di .clone(true) apre la porta per creare eventi generici invece di associare un evento dal vivo, che è più costoso.
Ad esempio, se si vuole fare un pulsante per eliminare un record:
<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>
Buona fortuna!
+1 Ottima risposta dal punto di vista delle prestazioni. Voglio anche aggiungere che la decisione tra HTML e JSON dipende anche dal fatto che i dati siano statici e puramente a scopo di visualizzazione, o se lo si voglia manipolare in un secondo momento. –