看《基于MVC的JavaScript Web富应用开发》了解到jquery.tmpl插件,试用了一下,感觉不错,如果在拼接字符串很麻烦(特别字符串中又有字符串,双引号与单引号滥用时),可以使用这种方法,下面是练习的小实例(插件可以网上搜,不知道csdn能不能贴外链,没有放上去)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<!--引入tmpl插件-->
<script type="text/javascript" src="jquery/jquery.tmpl.js"></script>
<script type="text/javascript">
var object = {
url: "http://example.com",
getName: function(){
return "Trevor";
}
};
var template = '<li><a href="${url}">${getName()}</a></li>';
var element = jQuery.tmpl(template, object);
$("body").append(element);
//使用{{if url}}...{{/if}}或{{if messages.length}}...{{else}}...{{/if}}来进行逻辑判断
var elements = {
url:"http:",
name:'test'
}
template = '<li><a href="${url}">{{if name == "trst"}}${name == "trst"}{{else}}no name{{/if}}</a></li>';
var t = jQuery.tmpl(template,elements);
$("body").append(t);
//使用{{each}}进行循环逻辑,$index 访问迭代下标,$value访问迭代变量
var arrayElement = {
elements:['home','back','link']
}
template = '<ul>{{each elements}}<li>${$index + 1}: <em>${$value}</em></li>{{/each}}</ul>';
$("body").append ($.tmpl(template,arrayElement));
</script>
</body>
</html>
它还有一个强大之处是你可以自定义脚本标签并能过ID去引用标签。如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery/jquery.tmpl.js"></script>
<!-- 自定义脚本标签 -->
<script type="text/x-jquery-tmpl" id="someTemplate">
<span>${getName()}</span>
</script>
<script>
var data = {
getName: function(){ return "Bob" }
};
//通过JavaScript的ID引用
var element = $("#someTemplate").tmpl(data);
element.appendTo($("body"));
</script>
</body>
</html>