Explication détaillée de l'utilisation de jquery.tmpl, un framework pour générer du HTML à l'aide de templates_jquery

La demande dynamique de données pour mettre à jour la page est une méthode très courante de nos jours, comme le chargement dynamique de pagination des commentaires de blog, le chargement progressif et le chargement de requête planifié de Weibo, etc.

Dans ces cas, les données renvoyées par la requête dynamique sont généralement soit assemblées en HTML, JSON ou XML. Bref, les données ne sont pas assemblées côté navigateur, mais côté serveur. Cependant, renvoyer du HTML n'est pas rentable en termes de volume de transmission, et en termes de transmission Web, JSON est désormais plus utilisé que XML.

Une partie très gênante de la génération de HTML basé sur JSON du côté du navigateur est que c'est bien lorsque la structure n'est pas complexe, mais une fois que la structure est compliquée, cela devient un cauchemar. Vous devez être très prudent pour écrire du JavaScript. code presque impossible à maintenir.

Par conséquent, certains frameworks qui utilisent des modèles pour générer du HTML sont apparus les uns après les autres. jquery.tmpl en fait partie. Présentons en détail l'utilisation de jquery.tmpl

.

Ce qui suit se concentre sur la façon de l'utiliser :

Tout d'abord, introduisons les modèles et les données. Inutile de dire que ces deux-là sont définitivement indispensables

.

Il existe deux façons de définir des modèles. Le code spécifique est donné ci-dessous

Copier le code Le code est le suivant :

var markup = "

Certains contenus : ${item}.

" Plus de contenu : ${myValue}.

";

$.template( "movieTemplate", balisage );

Copier le code Le code est le suivant :

De cette manière, deux modèles sont définis, le premier est écrit en script et le second est écrit en html

Les données utilisent json

Commencez à rendre le modèle ci-dessous

Copier le code Le code est le suivant :

$( "#movieTemplate" ).tmpl( films ).appendTo( "#movieList" );

$.tmpl( "movieTemplate", films ).appendTo( "#movieList" );

Remarque : les films sont un tableau de données JSON

Copier le code Le code est le suivant :

var films = [

{ Nom : "Le violon rouge", ReleaseYear : "1998" },
{ Nom : "Eyes Wide Shut", ReleaseYear : "1999" },
{ Nom : "L'héritage", ReleaseYear : "1976" }
];

Plusieurs balises courantes de jquery.tmpl sont :

${}, {{each}}, {{if}}, {{else}}, {{html}}

Balises rarement utilisées

{{=}},{{tmpl}} et {{wrap}}.

${} est équivalent à {{=}} et est une variable de sortie. Les expressions peuvent également être placées dans ${} (il doit y avoir un espace entre = et la variable, sinon elle ne sera pas valide)

Exemple :

Copier le code Le code est le suivant :

{{each}} fournit une logique de boucle, $value accède à la variable d'itération. Vous pouvez également personnaliser la variable d'itération (i, valeur)

. Exemple :

Copier le code Le code est le suivant :

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

示例：

复制代码 代码如下 :

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

 实例

复制代码 代码如下 :

{{tmpl}} 嵌套模版

实例

复制代码 代码如下 :

{{wrap}},包装器

实例

复制代码 代码如下 :

   

 

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

 实例：

复制代码 代码如下 :

Méthode

$.tmplItem(), en utilisant cette méthode, vous pouvez récupérer $item

à partir de l'élément rendu Exemple

Copier le code Le code est le suivant :