jquery模板jquery.tmpl.js使用教程(附jquery.tmpl.js下载)_H5之家

jquery模板jquery.tmpl.js使用教程(附jquery.tmpl.js下载)

使用js tempate的意义：
用js对json数据处理生成html，如果不复杂还可以，复杂了就不好处理了，而且让js代码看起来特不优雅，维护这种代码等于自杀啊，别谈扩展性了。。。
介绍一个jquery模板 jquery.tmpl.js,使用案例如下：
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="jquery.tmpl.min.js" type="text/javascript"></script> <script> $(function () { var website = [{ url: 'www.phpddt.com', name: 'PHP点点通', tags: ['web教程', '博客'] }, { url: 'www.baidu.com', name: '百度', tags: ['搜索引擎', '中文搜索']}]; //$('#myTemplate').tmpl(website).appendTo('#rows'); $('#myTemplate').tmpl(website, { getTags: function (separator) { return this.data.tags.join(separator); } }).appendTo('#rows'); }); </script> <script type="text/x-jquery-tmpl"> <tr><td>${$data.url}</td><td>${$data.name}</td><td>${$item.getTags(';')}</td></tr> </script> </head> <body> <table cellspacing="0" cellpadding="3"> <tbody> </tbody> </table> </body> </html>
常见的一些方法：
$.template()方法，将一段Html编译为模板。
${}:占位符，另一种写法{{= field}},必须注意的是"="号后必须跟一个空格。

$item、$data两个属性：$item代表当前的模板；$data代表当前的数据。
{{each}}循环
{{if}}和{{else}}逻辑判断
{{html}}，直接将对象属性值作为HTML代码替换占位符
{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器
$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item
本地下载：jquery-tmpl-master.zip
官方下载：https://github.com/BorisMoore/jquery-tmpl

转载请注明地址: 尊重他人劳动成果就是尊重自己!

jQuery