由于工作项目的需要用到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="Scripts/jquery-1.11.1.js"></script>
12 <script type="text/javascript" src="Scripts/underscore.js"></script>
13 <script type="text/javascript" src="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.addOneWorld
25 );
26 }
27 });
28
29 AppView=Backbone.View.extend({
30 el:$(‘body‘),
31 initialize:function(){
32 this.worlds=new Worlds(null,{//构造函数，实例化一个Worlds的集合类，并且以字典的方式传入AppView对象
33 view:this
34 });
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是用来处理页面以及简单页面逻辑的。
时间： 2024-10-25 07:32:34