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

来源：互联网发布：淘宝好评返现违规补救编辑：程序博客网时间：2024/05/19 13:16
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>