看《基於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>