昨晚无意中发现一个有趣的框架插件tmpl()，其文档在这里。官方解释对该插件的说明：将匹配的第一个元素作为模板，渲染指定的数据，签名如下：tmpl([数据，][选项])其中参数数据的用途很明显：用于提出的数据，可以是任意射流研究…类型，包括数组和对象选项。一般情况下都是选项了，官方指出，此处的选择是一个用户自定义的键值对的地图，继承自tmplItem数据结构，适用于模板提出动作期间。在这里可以下载到最新的tmpl插件，值的一提的是，官方同时也说明了，tmpl目前是贝塔版，使用需谨慎.好吧，先来一个最直观的例子：复制代码代码如下： %@页面语言='C#' AutoEventWireup='true' %！DOCTYPE html html head titlejquery模板演示/标题链接rel='样式表href='内容/站点。css“类型=”文本/css'/link rel='样式表href='内容/jquery . ui . CSS“type=”文本/CSS “/脚本类型='文本/JavaScript ' src=' http :脚本/jquery。js /脚本脚本脚本类型='文本/JavaScript ' src=' http 3360脚本/jquery .$('#myTemplate ').tmpl(用户)。appendo(' # row ')；});/script style type=' text/CSS ' body { padd : 10px；}表格{边框-折叠：折叠；}/样式/头体表格单元格间距='0 '单元格填充='3 '边框=' 1 ' t正文id=' rows '/t正文/表格/body/html

例子虽然很小也很简单，但我觉得这个已经很有用了。当然，tmpl()还可以使用来自远端的数据，比如说服务：复制代码代码如下：公共操作结果SampleData(){ var JSON=new JsonResult()；json .Data=new[] { new { ID='remote1 '，Name='abcd' }，new { ID='remote2 '，Name=' efg ' } }json .JsonRequestBehavior=JsonRequestBehavior .允许获取返回json}这是一个手动音量调节的行动，我把它当做是一个提供数据的服务，然后射流研究…代码如下： 复制代码代码如下：美元(' #btnAjax ').单击(函数(){ $).getJSON('@Url .操作(“样本数据”、“主页”)，函数(JSON){ $(' # row ').empty()；$('#myTemplate ').tmpl(json).appendo(' # row ')；});});效果：

定义模板时，推荐的方式为定义使用脚本id=' templateName '类型=' text/x-jquery-tmpl '/脚本做为模板的包装器，但定义方式并不只有这一种，你可以使用div id=' template ' style=' display : none；'！-标记- /div的方式来定义，但是官方文档中说，这种方法可能会产生浏览器无法解析的HTML，因此不推荐使用，不过我试了下，倒没有出什么意外：HTML:复制代码代码如下： div ID=' container '/div div ID=' inline ' style=' display : none ' label $ { ID }/label label $ { Name }/label br//div JavaScript :复制代码代码如下： var user=[{ id : ' think 8848 '，Name: 'Joseph Chan' }，{ ID: 'aCloud '，Name: '张玛莉' }];$('#inline ').tmpl(用户)。appendo(' # container ')；效果：

编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如：Html复制代码代码如下：表格单元格间距='0 '单元格填充='3 '边框=' 1 ' t正文id=' CompileRows '/t正文/表JavaScript复制代码代码如下：脚本id='compile1 '类型=' text/x-jquery-tmpl ' { tmpl ' cache ' } } trtd $ { ID }/tdtd $ { Name }/TD/tr/脚本脚本id='compile2 '类型=' type/x-jquery-tmpl ' trtd colspan=' 2 ' $ { Group }/TD/tr/脚本脚本类型=' text/JavaScript ' $(function(){ var Group Users=[{ id : ' think 8848 $(' # compile 2 ')).模板('缓存');$('#compile1 ').群用户.appendo(' # compileRows ')；});/script效果：

$.模板()方法，将一段超文本标记语言编译为模板，示例：Javascript复制代码代码如下： var加价=' trtd $ { ID }/tdtd $ { Name }/TD/tr '；$.模板('模板，标记);$.' tmpl('模板，用户)。appendo(' # TemplateRows ')；这样就可以将利润中定义的模板应用于模板行对象jQuery .tmpl()的标签，表达式，属性： ${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{=field}}如： 复制代码代码如下：脚本ID=' my template ' type=' text/x-jquery-tmpl ' trtd { {=ID } }/tdtd {=Name } }/TD/tr/script必须要注意的是，'='号后必须跟一个空格，不然是没有效果的。另外，${}中还可以放表达式，这个牛x吧，如： Html复制代码代码如下：表格单元格间距='0 '单元格填充='3 '边框=' 1 ' t正文id='表达式行'/t正文/表JavaScript复制代码代码如下：脚本类型=' text/JavaScript ' $(function(){ var userLangs=[{ id : ' think 8848 '，Name: 'Joseph Chan '，lang :[' Chinese '，' English'] }，{ ID: 'aCloud '，Name: '张玛莉，郎3360['中文'，'法文']}]；$(“# expression”).tmpl(用户语言)。appendo(' #表达式行')；});/script效果

jQuery .tmpl()有两个比较有用的属性：美元项目、数据：美元美元项目代表当前的模板；$数据代表当前的数据Html。复制代码代码如下：表格单元格间距='0 '单元格填充='3 '边框=' 1 ' t正文id=' PropertyRows '/t正文/表JavaScript复制代码代码如下：脚本ID=' property ' type=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { $ data .name }/tdtd $ { $ item。GetLangs('；')}/TD/tr/script脚本类型=' text/JavaScript ' $(function(){ var userLangs=[{ id : ' think 8848 '，Name: 'Joseph Chan '，lang 3360[' Chinese '，' English'] }，{ ID: 'aCloud '，Name: '张玛莉，郎3360['中文'，'法文']}；$('#property ').tmpl(用户语言，getLangs:函数（分隔符){返回this.data.Langs.join(分隔符);} }) .appendo(' # property rows ')；});/script效果：

{ {每个}}这个标签一看就知道是做循环用的了，用法如下：Html复制代码代码如下： ul id=' EachList '/ul JAVAScript复制代码代码如下：脚本id='每个'类型=' text/x-jquery-tmpl ' liid : $ { ID }；名称： $ { Name }；br/Langs : ul { }每个Langs}}li${$index 1}:标签${$value} ./label/Li { {/每个} } ul/Li/脚本脚本类型=' text/JavaScript ' $(function(){ var userLangs=[{ id : ' think 8848 '，Name: 'Joseph Chan '，lang :[' Chinese '，' English'] }，{ ID: 'aCloud '，Name: '张玛莉，Langs: ['中文'，'法文']}]；$(' #每个')。tmpl(用户语言)。' appendTo('每个列表');});效果：

{ {每个}}还有另一种写法：Javascriptscript脚本脚本ID='每个2 '类型=' text/x-jquery-tmpl ' liid : $ { ID }；名称： $ { Name }；br/lang s : ulstrong { }每个} li $ { i 1 } :标签${lang} ./label/Li { {/每个} }/STRONG/ul/Li/脚本作用和前一种是一样的{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例：Javascriptscript脚本脚本ID=' if else ' type=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { Name }/tdtd { { if langs }。长度1 } } $ { langs。联接('；')} { { else } } $ { Langs } { {/if } }/TD/tr/script如果Langs数组元素超过一个，则用'; '连接起来，否则就直接显示兰斯，效果：

{{html}}，直接将对象属性值作为超文本标记语言代码替换占位符：javascript脚本id='html '类型=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { Name }/tdtd { { html Ctrl } }/TD/tr/script脚本类型=' text/JavaScript ' $(function(){ var Ctrl=[{ id : ' think 8848 '，Name: 'Joseph Chan '，Ctrl: '输入类型='按钮'值='Demo' /' }，{ id3333330$('#html ').tmpl(ctrl ).appendo(' # HTMlRows ')；});/script效果：

{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子： JavaScript脚本id='tmpl1 '类型=' text/x-jquery-tmpl ' trtd $ { ID }/tdtd $ { Name }/tdtd { { tmpl($ data)' # tmpl 2 ' }/TD/tr/script脚本id='tmpl2 '类型=' type/x-jquery-tmpl“{ 0每个Langs } } $ { $ value } { {/每个} }/脚本脚本类型=' text/JavaScript ' $(function(){ var user langlanglang } $(' # tmpl 1 ').tmpl(用户语言)。appendo(' # tmplRows ')；});/script效果：

{{wrap}}，包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例： HTML div id=' wrappdemo '/div JavaScript script id=' myTmpl ' type=' text/x-jquery-tmpl '以下对一些超文本标记语言内容进行了包装和重新排序： { {包装' # tableWrapper ' } } h3One/H3分部第一个内容/H3 div/H3 div和emmore/em内容./div { {/wrap } }/脚本id=' Tablewrapper '类型=' text/x-jquery-tmpl '表格单元格间距=' 0 '单元格填充=' 3 '边框=' 1 ' t正文tr { {每个$item.html('h3 '，true)} } TD $ { $ value }/TD { {/每个} }/tr { }每个$ item。html(' div ')} } TD { { html $ value } }/TD { {/每个}} /tr /tbodytmpl().appendo(' # wrappdemo ')；});/script效果：

$.tmplItem()方法，使用这个方法，可以获取从提出出来的元素上重新获取$项目，示例：美元.委托(“tr”，“click”，function () { var item=$ .tmplItem(这个);警报（项目。数据。名称);});效果：

至此，官方的应用程序接口中介绍的内容就完了，我的E文水平不高，对于某些细节难免理解不周，如有谬误之处，敬请指正，谢谢。源代码下载