posts - 36, comments - 30, trackbacks - 0, articles - 3

Backbone学习笔记一

Posted on 2016-04-02 10:06 笑看人生 阅读(2537) 评论(0)  编辑  收藏
项目里用到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>

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


只有注册用户登录后才能发表评论。


网站导航: