您的位置：首页 > Web前端 > JQuery

jquery模板jquery.tmpl.js使用教程

2016-06-03 15:18 519 查看

FROMl:http://www.phpddt.com/dhtml/jquery_tmpl.html

使用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 id="myTemplate" 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" border="1">
<tbody id="rows">
</tbody>
</table>
</body>
</html>

常见的一些方法：

$.template()方法，将一段Html编译为模板。

${}:占位符，另一种写法{{=
field}},必须注意的是"="号后必须跟一个空格。

$item、$data两个属性：$item代表当前的模板；$data代表当前的数据。

{{each}}循环

{{if}}和{{else}}逻辑判断

{{html}}，直接将对象属性值作为HTML代码替换占位符

{{wrap}},包装器，这回不需要指定对哪一个元素使用模板了，直接生成模板的包装器

$.tmplItem()方法，使用这个方法，可以获取从render出来的元素上重新获取$item

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航