Detaillierte Erläuterung der Verwendung von jquery.tmpl, einem Framework zum Generieren von HTML mithilfe von templates_jquery

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.

Daher sind nacheinander einige Frameworks erschienen, die Vorlagen zum Generieren von HTML verwenden. Eines davon ist jquery.tmpl. Lassen Sie uns die Verwendung von jquery.tmpl im Detail vorstellen

Im Folgenden geht es um die Verwendung:

Lassen Sie uns zunächst Vorlagen und Daten vorstellen. Diese beiden sind natürlich unverzichtbar.

Es gibt zwei Möglichkeiten, Vorlagen zu definieren. Der spezifische Code ist unten angegeben

Code kopieren Der Code lautet wie folgt:

var markup = "

Einige Inhalte: ${item}.
" " Mehr Inhalt: ${myValue}.

";

$.template( "movieTemplate", markup );

Code kopieren Der Code lautet wie folgt:

Auf diese Weise werden zwei Vorlagen definiert, die erste ist in Skript geschrieben und die zweite ist in HTML geschrieben

Daten verwenden JSON

Beginnen Sie mit dem Rendern der Vorlage unten

Code kopieren

Der Code lautet wie folgt: $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" ); $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );

Hinweis: „Filme“ ist ein JSON-Datenarray

Code kopieren

Der Code lautet wie folgt: var movies = [ { Name: „The Red Violin“, Erscheinungsjahr: „1998“ },

{ Name: „Eyes Wide Shut“, Erscheinungsjahr: „1999“ },

{ Name: „The Inheritance“, Erscheinungsjahr: „1976“ }
];




Mehrere häufige Tags von jquery.tmpl sind:

${}, {{each}}, {{if}}, {{else}}, {{html}} Ungewöhnlich verwendete Tags

{{=}},{{tmpl}} und {{wrap}}.

${} entspricht {{=}} und ist eine Ausgabevariable. Ausdrücke können auch in ${} platziert werden (zwischen = und der Variablen muss ein Leerzeichen stehen, sonst ist sie ungültig)

Beispiel:

Code kopieren

Der Code lautet wie folgt:

{{each}} stellt Schleifenlogik bereit, $value greift auf die Iterationsvariable zu. Sie können auch die Iterationsvariable (i, value) anpassen

Beispiel:

Code kopieren

Der Code lautet wie folgt:

{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if

示例：

复制代码 代码如下:

{{html}} 输出变量html,但是没有html编码，适合输出html代码

 实例

复制代码 代码如下:

{{tmpl}} 嵌套模版

实例

复制代码 代码如下:

{{wrap}},包装器

实例

复制代码 代码如下:

   

 

$data $item $item代表当前的模板；$data代表当前的数据.

 实例:

复制代码 代码如下:

$.tmplItem()-Methode. Mit dieser Methode können Sie $item

aus dem gerenderten Element abrufen Beispiel

Code kopieren Der Code lautet wie folgt: