Das dynamische Anfordern von Daten zum Aktualisieren der Seite ist heutzutage eine sehr verbreitete Methode, wie z. B. das dynamische Laden von Blog-Kommentaren durch Paging, das rollierende Laden und das geplante Laden von Anfragen von Weibo usw.
In diesen Fällen sind die von der dynamischen Anfrage zurückgegebenen Daten normalerweise entweder assembliertes HTML, JSON oder XML. Kurz gesagt, die Daten werden nicht auf der Browserseite, sondern auf der Serverseite assembliert. Allerdings ist die Rückgabe von HTML im Hinblick auf das Übertragungsvolumen nicht kosteneffektiv, und im Hinblick auf die Webübertragung wird JSON mittlerweile häufiger verwendet als XML.
Ein sehr problematischer Teil beim Generieren von HTML basierend auf JSON auf der Browserseite besteht darin, dass es in Ordnung ist, wenn die Struktur nicht komplex ist, aber sobald die Struktur kompliziert ist, wird es zu einem Albtraum. Sie müssen beim Schreiben von JavaScript sehr vorsichtig sein Code, der fast unmöglich zu warten ist.
So wie Smarty-Vorlagen verwendet werden, um das Problem der Datenbuchstabierung in PHP zu lösen, kann auch JavaScript Vorlagen verwenden, um diese Probleme zu lösen. Beispielsweise wurde jquery.tmpl, das auf jQuery basiert, jetzt als offizielles Vorlagen-Plug-in akzeptiert. Die detaillierte API befindet sich in den Vorlagen von jQuery und die integrierte Demo demonstriert auch verschiedene Verwendungsmöglichkeiten.
Bei meinen eigenen Anwendungen fühle ich mich sehr wohl. Ich verwende eine intuitivere HTML-Schreibmethode anstelle von JavaScript und verwende dann JSON-Variablen, um die Daten einzugeben. Der Code sieht viel besser aus.
Tmpl bietet mehrere Tags:
${}: Entspricht {{=}}, ist eine Ausgabevariable und hat die HTML-Codierung bestanden.
{{html}}: Ausgabevariable HTML, jedoch ohne HTML-Codierung, geeignet für die Ausgabe von HTML-Code.
{{if }} {{else}}: Stellt Verzweigungslogik bereit.
{{each}}: Stellt Schleifenlogik und $value-Zugriff auf Iterationsvariablen bereit.
So verwenden Sie jquery tmpl:
Vorlagendefinition:
Methode 1:
<script id="movieTemplate" type="text/x-jquery-tmpl">
<li>
<b>${Name}</b> (${ReleaseYear})
</li>
</script>Methode 2:
function makeTemplate(){
var markup='<li><b>${Name}</b> (${ReleaseYear})</li>‘;
$.template(“movieTemplate”, markup);
}DATEN:
var movies = [
{ Name: "The Red Violin", ReleaseYear: "1998" },
{ Name: "Eyes Wide Shut", ReleaseYear: "1999" },
{ Name: "The Inheritance", ReleaseYear: "1976" }
];Skript:
$( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" );
Beispiel 1:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>
<body>
<ul class="param-list"></ul>
<script type="text/x-jquery-tmpl" id="new-param-tmpl">
<li rel="${num}">
<input type="text" name="key[${num}]" value="${key}" placeholder="key" /> =
<input type="text" name="value[${num}]" value="${value}" placeholder="value" />
<button type="button" class="button small remove-param"><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/69.png" height="12" alt=""/></button>
<button type="button" class="button small add-param"><span><img src="http://mediacdn.disqus.com/1338845651/images/v3/icon/16/13.png" height="12" alt=""/></button>
</li>
</script>
<script>
$(function(){
function addParam(key, value) {
var param_list = $('.param-list');
var num = param_list.find('li').length;
// build a template to clone the current row
var built = $('#new-param-tmpl').tmpl({
num: num,
key: key || '',
value: value || '',
});
if (key) param_list.prepend(built);
else param_list.append(built);
param_list.find('li:not(:last) .add-param').hide();
param_list.find('li:last .add-param').show();
param_list.find('li:not(:last) .remove-param').show();
param_list.find('li:last .remove-param').hide();
}
// bind events
$('.param-list .remove-param').live('click', function(){
$(this).parent().remove();
return false;
});
$('.param-list .add-param').live('click', function(){
addParam();
return false;
});
addParam();
})
</script>
</body>
</html>Beispiel 2
