首页 > 代码库 > Backbone学习日记第一集——hello backbone
Backbone学习日记第一集——hello backbone
由于工作项目的需要用到backbone.js这个MVC框架，所以前段时间一直在网上收集了好久资料，但是都没什么好一点的，偶然间发现了www.the5fire.com网站上有backbone全套的教程，于是又当回剁手族买了本电子书，但是诸多原因一直没怎么看，今天在公交车上无聊，翻了翻手机突然想起来了这本书，在车上看了2个章节，还不错，有激起了我对他的学习欲望，回到家就迫不及待的收拾完家务，开始code。
下面是我今天晚上照着例子写了一个hello Backbone的Demo
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="check">新手报到</button> 9 <ul id="world-list"></ul>10 11 <script type="text/javascript" src="http://www.mamicode.com/Scripts/jquery-1.11.1.js"></script>12 <script type="text/javascript" src="http://www.mamicode.com/Scripts/underscore.js"></script>13 <script type="text/javascript" src="http://www.mamicode.com/Scripts/backbone.js"></script>14 <script>15 (function($){16 World=Backbone.Model.extend({17 name:null //创建一个World对象，拥有name属性18 });19 20 Worlds=Backbone.Collection.extend({21 //World对象的集合22 initialize:function(models,options){23 this.bind(‘add‘,24 options.view.addOneWorld25 );26 }27 });28 29 AppView=Backbone.View.extend({30 el:$(‘body‘),31 initialize:function(){32 this.worlds=new Worlds(null,{//构造函数，实例化一个Worlds的集合类，并且以字典的方式传入AppView对象33 view:this34 });35 },36 events:{37 ‘click #check‘:‘checkIn‘//事件绑定，绑定Dom中id为check的元素38 },39 checkIn:function(){40 var world_name=prompt("请问你来自哪个世界");41 if(world_name==‘‘){42 world_name=‘未知‘43 }44 var world=new World({name:world_name});45 this.worlds.add(world);46 },47 addOneWorld:function(model){48 $(‘#world-list‘).append(‘<li>这里是来自<b>‘ +49 model.get(‘name‘) +50 ‘</b>的问候：hello Backbone！</li>‘)51 }52 });53 var appView=new AppView;54 })(jQuery)55 </script>56 </body>57 </html>
Backbone是一套很出色的MVC框架，Model代表数据模型，Collection是一个模型的集合，View是用来处理页面以及简单页面逻辑的。
Backbone学习日记第一集——hello backbone
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。