动态请求更新页面的数据现在是一种非常常见的方法，如博客评论分页、动态加载、微博客的滚动负载和定时请求加载。

在这些情况下，动态请求返回的数据通常不是HTML、JSON或XML。简言之，数据在浏览器端并不拼写服务器端的数据，但是从传输的角度来说，返回HTML是不划算的，而在Web传输中，更多的是使用JSON而不是XML。

浏览器端基于JSON生成HTML。真令人苦恼。当结构不复杂时，它会很好。如果结构复杂，它就会死亡。它需要仔细仔细地编写Javaｓｃｒｉｐｔ代码，这几乎是不可能维持的。

因此，一些用模板生成HTML的框架就是其中之一。让我们详细描述了一jquery.tmpl使用。

以下是使用方法的重点：

首先，介绍模板和数据，并不是说二者缺一不可。

定义模板有两种方法，下面给出一个特定的代码

复制代码代码如下所示：

var标记一些内容：$ }

+ 更多的内容：自我价值$ { }。；

美元。模板（movietemplate





复制代码代码如下所示：



$ {姓名}（$ { releaseyear }）





这样，定义了两个模板，第一个是用脚本编写的，另一个是用HTML编写的。

JSON数据

下面开始渲染模板

复制代码代码如下所示：

$（# movietemplate ），Tmpl（电影），AppendTo（# movielist ）；

美元。源（movietemplate



注意：电影是一组JSON数据。

复制代码代码如下所示：

var电影= {

{名称：红色小提琴

{名称：睁大眼睛

{名称：继承

}；



对于jquery.tmpl几种常见的标签：

{ { }，{ } }，{ } }，{ } }，{ }，{ } }，{ } }，{ } }

不经常使用的标签

{ { { { = } } } }，{ {说明书和包装} }。

与输出变量相等，也可以放在$表达式（=和变量之间必须有空格，否则无效）。

实例：

复制代码代码如下所示：









$ }

{名称}

{ $（数字）+ 1 }

{状态}







无功用户ID：'think8848'name：{ {，约瑟夫陈，Num：1，现状：1 }，{编号：'acloud，名称：玛丽祥，号：2} }；

$（#演示）。Tmpl（用户），AppendTo（# div_demo）；





{每个}提供循环逻辑，$值访问迭代变量也可以定制迭代变量（i，value）。

实例：

复制代码代码如下所示：







用户

{每个（i，用户）用户}

$ { 1 + }：{用户名称}

{如果i = 0 } }

组

{每个（j，组）组}

$组名称}

{每个} }

{如果} }

{一} } { /

离开

{每个离开} }

{ $ value。名称}

{每个} }





VaR数据= { } {用户：名称：{ { 'jerry，姓名：约翰} }，组：名称：'mingdao{ { }，{姓名：} 'meihua{姓名：，测试} }，{ {离开：名字：} } }；

$（#每个），Tmpl（数据），AppendTo（# div_each）；





{ { } }如果逻辑的{ } }分支，{ } }则提供其他的等价物

实例：

复制代码代码如下所示：





$ { } }

{ if状态}

状态$ {状态}

{其他应用程序}

应用程序应用程序}

{ } }

没有

{如果} }







无功用户ID：'think8848'name：{ {，约瑟夫陈，状态：1、应用：0 }，{编号：'acloud，名称：玛丽祥，应用程序：1 }，{编号：'bmingdao，名称：'jerry金} }；

$（# ifelse）。Tmpl（用户），AppendTo（# div_ifelse）；





输出变量HTML，但没有HTML代码，适合输出HTML代码

例子

复制代码代码如下所示：







$ }

{名称}

{ }

{







无功用户= {编号：'think8848，名称：约瑟夫陈，HTML：'html}；

$（# HTML）。Tmpl（用户），AppendTo（# div_html）；





{ {源} }嵌套模板

例子

复制代码代码如下所示：







$ }

{ {源（$数据）的# tmpl2} }







{每一个名称}





用户ID：'think8848 VaR{ {，名称：{约瑟夫，'chan} }，{编号：'acloud，名称：{玛丽，'cheung} } }；

$（# tmpl1）。Tmpl（用户），AppendTo（#说明书）；





{包装}，包装器

例子

复制代码代码如下所示：







下面的包装和重新排序的一些HTML内容：

{ {包# tablewrapper} }

一



第一个内容



二



更多的内容…



{ } }









{ {每人item.html（H3，真的）} }



$ $ }



{每个} }





{ {每item.html美元（div）} }



{ $ } }



{一} } { /









$（函数（）{（））

$（# mytmpl）。Tmpl（），AppendTo（# wrapdemo）；

}）；





$数据项$ $代表当前模板；$代表当前数据。

实例uff1a

复制代码代码如下所示：







$

$ { $ item.getname（）}

U3000 U3000 U3000





用户ID：'think8848 VaR{ {，名称：{约瑟夫，'chan} }，{编号：'acloud，名称：{玛丽，'cheung} } }；

$（# item_data）。Tmpl（用户，

{

getName：功能（SPR）{

返回this.data.name.join（SPR）；

}

}）。AppendTo（# div_item_data）；





美元。tmplitem（）方法，使用这种方法，可以从元素的渲染检索项美元

例子

复制代码代码如下所示：



$（#演示），委托（'div '，点击'，功能（））{

VAR项=美元。tmplitem（本）；

警报（项目，数据，名称）；

}）；