jquery学习,[原]jQuery .tmpl(), .template()学习

on 2011-7-17 in 博文摘选 | 0 Comment
昨晚无意中发现一个有趣的jQuery插件.tmpl()，其文档在 var users = [{ ID: 'think8848', Name: 'Joseph Chan' }, { ID: 'aCloud', Name: 'Mary Cheung'}]; $('#inline').tmpl(users).appendTo('#container');
效果:
[原]jQuery .tmpl(), .template()学习jquery学习
编译缓存模板，在jQuery .tmpl()中，还可以将模板事先编译并缓存起来，然后在合适的时侯再使用，这对于一些数据嵌套是很有用的，如:
Html

Javascript

效果:
[原]jQuery .tmpl(), .template()学习jquery学习
jQuery .tmpl()的标签，表达式，属性：
${}:从前面的例子来看，这个标签的作用很明显了，相当于是占位符，但是它还有另一种写法{{= field}}如:

必须要注意的是，"="号后必须跟一个空格，不然是没有效果的。
另外，${}中并还可以放表达式，这个牛x吧，如:
Html

Javascript

效果：
[原]jQuery .tmpl(), .template()学习jquery学习
jQuery .tmpl()有两个比较有用的属性:$item、$data:
$item代表当前的模板；$data代表当前的数据。
Html

Javascript

效果:
[原]jQuery .tmpl(), .template()学习jquery学习
{{each}}这个标签一看就知道是做循环用的了，用法如下：
Html

Javascript

作用和前一种是一样的。
{{if}}和{{else}}，这两个标签应该一看就知道作用了，直接上示例:
Javascript

如果Langs数组元素超过1个，则用'; '连接起来，否则就直接显示Langs，效果:
[原]jQuery .tmpl(), .template()学习jquery学习
{{html}}，直接将对象属性值作为HTML代码替换占位符：
Javascript

效果:
[原]jQuery .tmpl(), .template()学习jquery学习
{{tmpl}}，前面已经提过该标签了，这里再给一个使用参数的例子:
Javascript

效果:
[原]jQuery .tmpl(), .template()学习jquery学习
{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器，示例:
Html

Javascript

效果:
[原]jQuery .tmpl(), .template()学习jquery学习
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item，示例:
$('tbody').delegate('tr', 'click', function () { var item = $.tmplItem(this); alert(item.data.Name); });
效果:
[原]jQuery .tmpl(), .template()学习jquery学习
至此，官方的API中介绍的内容就完了，我的E文水平不高，对于某些细节难免理解不周，如有谬误之处，敬请指正，谢谢。
源代码下载






Tags: 

延伸阅读

最新评论

发表评论