企业网站建设教程 pdf,企业年金管理办法,什么是企业网站营销,哪里有免费服务器之前用模板渲染都是用angular#xff0c;无意间发现了jquery tmpl这种轻量级#xff0c;其文档在这里#xff0c;本文主要为大家带来一篇jquery tmpl模板(实例讲解)。小编觉得挺不错的#xff0c;现在就分享给大家#xff0c;也给大家做个参考。一起跟随小编过来看看吧无意间发现了jquery tmpl这种轻量级其文档在这里本文主要为大家带来一篇jquery tmpl模板(实例讲解)。小编觉得挺不错的现在就分享给大家也给大家做个参考。一起跟随小编过来看看吧希望能帮助到大家。官方解释对该插件的说明将匹配的第一个元素作为模板render指定的数据签名如下:.tmpl([data,][options])其中参数data的用途很明显用于render的数据可以是任意js类型包括数组和对象。options一般情况下都是选项了官方指出此处的options是一个用户自定义的键值对的map继承自tmplItem数据结构适用于模板render动作期间。在这里可以下载到最新的tmpl插件值的一提的是官方同时也说明了tmpl目前是beta版使用需谨慎..下面是一个简单的例子jquery template demo${ID}${Name}$(function () {var users [{ ID: hao1, Name: Tony }, { ID: hao2, Name: Mary hui}];$(#myTemplate).tmpl(users).appendTo(#rows);});body{padding: 10px;}table{border-collapse: collapse;}其效果如下定义模板时推荐的方式为定义使用做为模板的包装器但定义方式并不只有这一种你可以使用编译缓存模板在jQuery .tmpl()中还可以将模板事先编译并缓存起来然后在合适的时侯再使用这对于一些数据嵌套是很有用的如:HTML:JavaScript:{{tmpl cached}}${ID}${Name}${Group}$(function () {var groupUsers [{ ID: hao1, Name: Tony, Group: Administrators }, { ID: hao2, Name: Mary hui, Group: Users}];$(#compile2).template(cached);$(#compile1).tmpl(groupUsers).appendTo(#compileRows);});其效果如下$.template()方法将一段Html编译为模板示例:JavaScriptvar markup ${ID}${Name};$.template(template, markup);$.tmpl(template, users).appendTo(#templateRows);这样就可以将markup中定义的模板应用于templateRows对象。jQuery .tmpl()的标签表达式属性${}:从前面的例子来看这个标签的作用很明显了相当于是占位符但是它还有另一种写法{{ field}}如:{{ ID}}{{ Name}}必须要注意的是号后必须跟一个空格不然是没有效果的。jQuery .tmpl()有两个比较有用的属性:$item、$data:$item代表当前的模板$data代表当前的数据。HtmlJavascript${ID}${$data.Name}${$item.getLangs(; )}$(function () {var userLangs [{ ID: hao1, Name: Tony, Langs: [PHP, Python] }, { ID: hao2, Name: Mary hui, Langs: [Java, C#]}];$(#property).tmpl(userLangs, {getLangs: function (separator) {return this.data.Langs.join(separator);}}).appendTo(#propertyRows);});{{each}}这个标签一看就知道是做循环用的了用法如下(关键词{{each Array}}、$value、$index)HTMLJavascriptID: ${ID};Name: ${Name};Langs:{{each Langs}}${$index 1}:${$value}.{{/each}}$(function () {var userLangs [{ ID: hao1, Name: Tony, Langs: [PHP, Python] }, { ID: hao2, Name: Mary hui, Langs: [Java, C#]}];$(#eachList).tmpl(userLangs).appendTo(#ul_each);});其效果如下{{each}}还有另一种写法:JavascriptID: ${ID};Name: ${Name};Langs:{{each(i,lang) Langs}}${i1}:${lang}{{/each}}作用和前一种是一样的。{{if}}和{{else}}这两个标签应该一看就知道作用了直接上示例:Javascript${ID}${Name}{{if Langs.length 1}}${Langs.join(; )}{{else}}${Langs}{{/if}}如果Langs数组元素超过1个则用; 连接起来否则就直接显示Langs效果如下{{html}}直接将对象属性值作为HTML代码替换占位符$.tmplItem()方法使用这个方法可以获取从render出来的元素上重新获取$item示例:$(tbody).delegate(tr, click, function () {var item $.tmplItem(this);alert(item.data.Name);});效果如下相关推荐
