Maison >interface Web >js tutoriel >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
$.template( "movieTemplate", balisage );
Commencez à rendre le modèle ci-dessous
${}, {{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 :
. Exemple :
{{if }} {{else}}提供了分支逻辑 {{else}} 相当于else if
示例:
{{html}} 输出变量html,但是没有html编码,适合输出html代码
实例
{{tmpl}} 嵌套模版
实例
{{wrap}},包装器
实例
$data $item $item代表当前的模板;$data代表当前的数据。
实例:
à partir de l'élément rendu Exemple