Posted on 2016-04-02 10:06
笑看人生 阅读(2544)
评论(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>
最后，在浏览器中打开这个文件，就可以看到效果了。