您的位置：首页 > 其它

读书笔记:视图和模板,改用Handlerbars做演示案例

2013-04-27 23:03 344 查看

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>

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

标签：

相关文章推荐

新的分享

章节导航