Backbone学习笔记一

项目里用到Backbone＋marionet框架，由于以前没有接触过这些技术，经过一段时间的学习，觉得这技术还是很强大的，现把

学习体会总结一下，以便后面查询。

Backbone是一个基于MVC模式的前端JavaScript框架，用于前端页面开发。

可以从http://backbone.js上下载对应的版本。

使用Backbone，需要依赖其他一些js库。

jQuery  http://jquery.com

Underscore http://underscorejs.org

页面的head元素内容大体如下：

1  < script  src ="lib/jquery-2.2.2.js" ></ script >
2  < script  src ="lib/underscore-2.js" ></ script >
3  < script  src ="lib/backbone.js" ></ script >

Backbone是一个MVC框架，通过V来展示M的内容，C接受用户的请求，更新模型，然后刷新V。

下面以一个例子，来说明怎么建立一个简单的Backbone应用。

首先定义一个Model类Student, 需要继承 Backbone.Model，这个类有三个成员变量，id，name，age，套用java中的叫法，其实可能

不应该这么称呼。

1     var Student = Backbone.Model.extend({
2         //set default values.
3         defaults: {
4             id: 0,
5             name: '',
6             age: 0
7         }
8     });

然后定义一个View类StudentView，需要继承 Backbone.View, 给这个类的成员变量el赋值 body，指明在页面的body元素中渲染视图，

同时重写了渲染方法render，指明如何渲染，以下代码应用jQuery的语法，在el指定的元素内，显示指定的内容。

每个视图绑定一个Model，在View的所有方法中可以直接调用this.model获取当前View绑定的Model对象，如下例子

this.model.get('id'), 注意获取model属性值时，不能直接使用thi.model.id

 1     var StudnetView = Backbone.View.extend({
 2         
 3         el: 'body',
 4         
 5         render:function(){
 6             var html = '学号: ' + this.model.get('id') + '.' +
 7                        '姓名: ' + this.model.get('name') + '.' +
 8                        '年龄: ' + this.model.get('age');
 9     
10             $(this.el).html(html);
11         }
12     });

定义完模型和视图类之类，接下来就是创建模型类和视图类对象，创建方法类似于java中创建对象。

新建一个model对象student，给对象属性指定值。

新建一个view对象，并且指定该view绑定的model对象。

调用view的渲染方法。

 1     var student = new Student({
 2             id: 10000,
 3             name: '王小二',
 4             age: 30
 5      });
 6         
 7         
 8     var studnetView = new StudnetView({
 9             model: student
10     });
11 
12     studnetView.render();

至此Backbone的代码就全部写完了，只要把这些新建Model和View的代码放到自定义的js文件中，

在页面加载时调用即可，这里自定义js文件名为main.js,内容如下：

 1 (function($){
 2     $(document).ready(function(){
 3         
 4         var student = new Student({
 5             id: 10000,
 6             name: '王小二',
 7             age: 30
 8         });
 9         
10         
11         var studnetView = new StudnetView({
12             model: student
13         });
14 
15         studnetView.render();
16         
17     });
18     
19     //set model
20     var Student = Backbone.Model.extend({
21         //set default values.
22         defaults: {
23             id: 0,
24             name: '',
25             age: 0
26         }
27     });
28     
29     //set view
30     var StudnetView = Backbone.View.extend({
31         
32         el: 'body',
33         
34         render:function(){
35             var html = '学号: ' + this.model.id + '.'
36                        '姓名: ' + this.model.name + '.'
37                        '年龄: ' + this.model.age;
38     
39             $(this.el).html(html);
40         }
41     });
42     
43 })(jQuery);

然后再新建一个index.html,内容如下：

 1  <! DOCTYPE html >
 2  < html >
 3      < head >
 4          < meta  charset ="utf-8" >
 5          < title >Backbone.js 1 </ title >
 6          < script  src ="lib/jquery-2.2.2.js" ></ script >
 7          < script  src ="lib/underscore-2.js" ></ script >
 8          < script  src ="lib/backbone.js" ></ script >
 9          < script  src ="js/main.js" ></ script >
10      </ head >
11      < body >
12         
13      </ body >
14  </ html >

最后，在浏览器中打开这个文件，就可以看到效果了。