jQuery .tmpl(), .template()学习
2016-01-29 22:25
495 查看
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里。
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下:
其中参数data的用途很明显:用于render的数据,可以是任意js类型,包括数组和对象。options一般情况下都是选项了,官方指出,此处的options是一个用户自定义的键值对的map,继承自tmplItem数据结构,适用于模板render动作期间。
在这里可以下载到最新的tmpl插件,值的一提的是,官方同时也说明了,tmpl目前是beta版,使用需谨慎..
好吧,先来一个最直观的例子:
例子虽然很小也很简单,但我觉得这个已经很有用了。
当然,.tmpl()还可以使用来自远端的数据,比如说服务:
这是一个MVC的Action,我把它当做是一个提供数据的服务,然后js代码如下:
效果:
定义模板时,推荐的方式为定义使用
做为模板的包装器,但定义方式并不只有这一种,你可以使用
的方式来定义,但是官方文档中说,这种方法可能会产生浏览器无法解析的HTML,因此不推荐使用,不过我试了下,倒没有出什么意外:
HTML:
Javascript:
效果:
编译缓存模板,在jQuery .tmpl()中,还可以将模板事先编译并缓存起来,然后在合适的时侯再使用,这对于一些数据嵌套是很有用的,如:
Html
Javascript
效果:
$.template()方法,将一段Html编译为模板,示例:
Javascript
这样就可以将markup中定义的模板应用于templateRows对象。
jQuery .tmpl()的标签,表达式,属性:
${}:从前面的例子来看,这个标签的作用很明显了,相当于是占位符,但是它还有另一种写法{{= field}}如:
必须要注意的是,"="号后必须跟一个空格,不然是没有效果的。
另外,${}中还可以放表达式,这个牛x吧,如:
Html
Javascript
效果:
jQuery .tmpl()有两个比较有用的属性:$item、$data:
$item代表当前的模板;$data代表当前的数据。
Html
Javascript
效果:
{{each}}这个标签一看就知道是做循环用的了,用法如下:
Html
Javascript
效果:
{{each}}还有另一种写法:
Javascript
作用和前一种是一样的。
{{if}}和{{else}},这两个标签应该一看就知道作用了,直接上示例:
Javascript
如果Langs数组元素超过1个,则用'; '连接起来,否则就直接显示Langs,效果:
{{html}},直接将对象属性值作为HTML代码替换占位符:
Javascript
效果:
{{tmpl}},前面已经提过该标签了,这里再给一个使用参数的例子:
Javascript
效果:
{{wrap}},包装器,这回不需要指定对哪一个元素使用模板了,直接生成模板的包装器,示例:
Html
Javascript
效果:
$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item,示例:
效果:
至此,官方的API中介绍的内容就完了,我的E文水平不高,对于某些细节难免理解不周,如有谬误之处,敬请指正,谢谢。
源代码下载
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下:
在这里可以下载到最新的tmpl插件,值的一提的是,官方同时也说明了,tmpl目前是beta版,使用需谨慎..
好吧,先来一个最直观的例子:
例子虽然很小也很简单,但我觉得这个已经很有用了。
当然,.tmpl()还可以使用来自远端的数据,比如说服务:
定义模板时,推荐的方式为定义使用
HTML:
编译缓存模板,在jQuery .tmpl()中,还可以将模板事先编译并缓存起来,然后在合适的时侯再使用,这对于一些数据嵌套是很有用的,如:
Html
$.template()方法,将一段Html编译为模板,示例:
Javascript
jQuery .tmpl()的标签,表达式,属性:
${}:从前面的例子来看,这个标签的作用很明显了,相当于是占位符,但是它还有另一种写法{{= field}}如:
另外,${}中还可以放表达式,这个牛x吧,如:
Html
jQuery .tmpl()有两个比较有用的属性:$item、$data:
$item代表当前的模板;$data代表当前的数据。
Html
{{each}}这个标签一看就知道是做循环用的了,用法如下:
Html
{{each}}还有另一种写法:
Javascript
{{if}}和{{else}},这两个标签应该一看就知道作用了,直接上示例:
Javascript
{{html}},直接将对象属性值作为HTML代码替换占位符:
Javascript
{{tmpl}},前面已经提过该标签了,这里再给一个使用参数的例子:
Javascript
{{wrap}},包装器,这回不需要指定对哪一个元素使用模板了,直接生成模板的包装器,示例:
Html
$.tmplItem()方法,使用这个方法,可以获取从render出来的元素上重新获取$item,示例:
至此,官方的API中介绍的内容就完了,我的E文水平不高,对于某些细节难免理解不周,如有谬误之处,敬请指正,谢谢。
源代码下载
相关文章推荐
- springmvc + jquery datatable + ajax实现动态分页查询
- jQuery使用Ajax
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
- jquery Ajax异步请求之session
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
- jquery ajax 提交 FormData
- jQuery UI 实例 - 对话框(Dialog)
- jQuery的Ajax详解
- 带你学习JQuery:事件冒泡和阻止默认行为
- jquery.datatable.js与CI整合 异步加载(大数据量处理)
- jquery-mousewheel 插件
- jQuery ajax - serialize()方法和serializeArray() 方法
- jquery.dataTable.js 基础配置
- jquery.datatables中文语言设置
- 前端程序员应该知道的 15 个 jQuery 小技巧
- jquery.datatables中文使用说明
- web.py服务端,jquery ajax简单例子
- 简单实用jquery实现数字读秒的倒计时代码