handlerbar的下載地址:http://handlebarsjs.com/
<html>
<head>
<script type="text/javascript" src="handlerbar.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
//首先創建一個數據類
var User=function(name){
this.name=name;
};
//創建存儲數據的空間
User.records=[];
//創建綁定函數，即把綁定事件與函數成對形式存入回調函數數組
User.bind=function(ev,callback){
var calls=this._callbacks||(this._callbacks={});
(this._callbacks[ev]||(this._callbacks[ev]=[])).push(callback);
}
//創建觸發函數,即要遍歷回調函數數組，把所有這個事件的回調函數，觸發.
User.trigger=function(ev){
var list,calls,i,l;
if(!(calls=this._callbacks)) return this;
if(!(list=this._callbacks[ev])) return this;
jQuery.each(list,function(){this()})
};
//創建一個對象，
User.create=function(name){
//向數據空間中，存入一個對象
this.records.push(new this(name));
//觸發change事件
this.trigger("change");
};
jQuery(function($){
//handlerbar模板，首先拿到模板
var source = $("#my-template").html();
//把模板解析
var template = Handlebars.compile(source);
//綁定一個change事件和函數
User.bind("change",function(){
console.log(User.records);
//根據模板，傳入User類，從而獲取完整html代碼
var html = template(User);
$("#userName").html('');
$("#userName").append(html);
});
$("button").click(function(){
var val=$(this).html();
User.records=[];
User.create(val);
});
/*自定義函數*/
Handlebars.registerHelper('StrForce', function(str) {
if(str=='員外'){
return str+"好厲害";
}else{
return str+"好漂亮";
}
});
});
</script>
<!--這裏的模板可以形成一個js文件，多個地方調用-->
<script id="my-template" type="text/x-handlebars-template">
{{#each records}}
<li>{{StrForce this.name}}</li>
{{/each}}
</script>
</head>
<body>
<button>員外</button>
<button>丫鬟</button>
<ul id="userName"></ul>
</body>
</html>