一、入门测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script> //一、创建对象 //var model=new Backbone.Model(); //var models=new Backbone.Collection(); //var view=new Backbone.View(); //二、调用model中set和get方法 //var model=new Backbone.Model(); //model.set('title','lili'); //var aa=model.get('title'); //alert(aa); //三、调用collection中add方法 var model01=new Backbone.Model({'name':'lili'}); var model02=new Backbone.Model({'name':'haha'}); var models=new Backbone.Collection(); models.add(model01); models.add(model02); alert(JSON.stringify(models)); </script> </head> <body> </body> </html>
二、backbone继承
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script> //一、扩展一个实例化方法和一个构造方法,其中extend第一个参数是实例化方法,第二个方法是构造方法 //var M=Backbone.Model.extend({ // aa:function (){ // alert(123); // } //},{ // bb:function (){ // alert(456); // } //}); // //var AA=new M(); //调用实例化方法必须先实例化出来 //AA.aa(); //M.bb(); //二、扩展一个方法并用model中参数调用 //var M=Backbone.Model.extend({ // defaults:{ //注意此处是json格式 // 'name':'lili' // } //}); //二次继承 var M=Backbone.Model.extend({ aa:function(){alert(123)} }); var AA=M.extend(); //调用实例化方法必须先实例化出来 var test=new AA(); test.aa(); </script> </head> <body> </body> </html>
三、自定义事件以及触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script> //一、触发自定义事件 //var M=Backbone.Model.extend({ // defaults:{'name':'lili'}, // initialize:{ //初始化构造函数 // this.on('change',function(){ // alert("默认参数被改变"); // }) // } //}) //var m=new M(); //m.set('name','haha'); //二、触发自定义事件中固定属性 //var M=Backbone.Model.extend({ // defaults:{'name':'lili'}, // initialize:function(){ // this.on('change:name',function(model){ // alert("默认参数被改变"); // console.log(model) // }) // } //}) //var m=new M(); //m.set('name','haha'); //三、view和MVC模式 $(function(){ var M=Backbone.Model.extend({ defaults:{'name':'lili'}, }); var V=Backbone.View.extend({ initialize: function() { this.listenTo(this.model, "change", this.render); }, render: function() { alert("默认参数被改变"); } }); var m=new M(); var v=new V({model:m}); m.set('name','hahah') }) </script> </head> <body> </body> </html>
四、传给服务器值和从服务器获取值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //1.将数据或者更新的数据保存到服务器上 // Backbone.sync=function(method,model){ // alert(method + ": " + JSON.stringify(model)); // model.set('id', 1); // } // var M=Backbone.Model.extend({ // defaults:{ // 'name':'lili', // }, // url:'/user' //此处一定要写服务器地址 // }); // var m=new M(); // m.save(); // m.save('name','haha'); //2.从服务器上获取数据,一般都是从集合中取值,等从服务器取值完毕后,开始渲染页面 Backbone.sync=function(method,model){ alert(method + ": " + JSON.stringify(model)); model.set('id', 1); } var C=Backbone.Collection.extend({ initialize:function(){ this.on('reset',function(){ //从服务器获取完毕后会执行此函数,但是本测试中url是假连接 alert("从服务器拉取值完毕"); }) }, url:'/user', }) var c=new C(); c.fetch(); </script> </head> <body> </body> </html>
五、Backbone路由和历史管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //适用于单页面跳转 var W=Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { alert("您打开的是help"); }, search: function(query, page) { alert("您打开的是search"); } }); var w=new W(); Backbone.history.start();//此处必须开启Backbone的路由历史管理 </script> </head> <body> </body> </html>
六、事件委托
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var V=Backbone.View.extend({ el:$('body'), events:{ //通过event进行事件委托 'click a':'aaa', 'mouseover li':'bbb', }, aaa:function(){ alert("a标签被点击了"); }, bbb:function(){ alert("li标签被鼠标悬浮了"); } }); var v=new V(); }) </script> </head> <body> <a href="javascript:">我是a标签</a> <ul> <li>123</li> <li>123</li> <li>123</li> </ul> </body> </html>
七、前端模板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script> <script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //前端模板:主要是控制JS与html分离 //1.js与html混合代码如下: //$(function(){ // // var M = Backbone.Model.extend({ // defaults : { // name : 'hello' // } // }); // // var V = Backbone.View.extend({ // // initialize : function(){ // // this.listenTo( this.model , 'change' , this.show ); // // }, // show : function(model){ // $('body').append( '<div>'+ model.get('name') +'</div>' ); // } // // }); // // var m = new M; // var v = new V({model:m}); // m.set('name','hi'); // //}); //2.JS与html分离代码如下(需配合body中template): $(function(){ var M = Backbone.Model.extend({ defaults : { name : 'hello' } }); var V = Backbone.View.extend({ initialize : function(){ this.listenTo( this.model , 'change' , this.show ); }, show : function(model){ $('body').append( this.template(this.model.toJSON()) ); }, template:_.template($("#template").html()), //此处用的是underscoreJS里面的_.template方法 }); var m = new M; var v = new V({model:m}); m.set('name','hi'); }); </script> </head> <body> <!--<script type="text/template" id="template"> <div><%=name%></div> </script>--> <script type="text/template" id="template"> <%var i=0; for(i=0;i<=3;i++){%> <div><%=name%></div> <%}%> </script> </body> </html>