Backbone.js 中使用 Model

calendar Jan 6, 2014   ---   · 2 min read · javascript Backbone  ·
Share on: linkedin copy
前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充，其实这已经很接近 Model 了。现在来学习怎么创建自己的 Model 类，并简单的使用。Backbone.js 中 Model 会涉及到很多的概念，如 Model 的初始化，默认值，属性的读写，属性值改变的监听，数据渲染，校验，以及与服务端的数据同步等。


本文不打算讲前面大部分的内容，最初思考的一个脉络是怎么把 Model 引入进来，所以线索会是 建立 Model 类 -> 初始化 Model 实例 -> 设置值 -> 渲染到页面，其余 Model 特性分别再深入。

直观地能想到的 JavaScript 的 Model 是一个 JSON 对象，差不多，不过 Backbone 赋予 Model 默认属性，只能通过 getter/setter 方法来访问 Model 中的属性值，不能直接用点操作符，相当于 Backbone 的属性是私有的。

声明 Model 类
1var Person = Backbone.Model.extend({  
2    defaults : { //看上去是指定默认值，同时也是声明有些什么属性
3        name : 'unknown',  
4        age : 20
5    }  
6});

使用 Model
 1// 实例化 Model 对象  
 2var john = new Person({  
 3    name : 'John'  //没有指定 age，默认为 20
 4});
 5
 6console.log("1: " + john.name); //undefined
 7console.log("2: " + john.get('name')); //john
 8
 9console.log("3: " + john.get('age')); //20
10
11john.age = 45; //这种方式赋值, 不能设置到 john.attributes 中去
12console.log("4: " + john.get('age')); //20
13
14john.set({age: 100});
15console.dir(john);

上面输出为


因为存储的字段都在对象的 attributes 的属性中，所以不能简单的用点操作来存取值，而要使用
john.get('name'); john.escape('name');  //可转义 HTML 标签 john.set({name:  'Johnson'}); john.set('name', 'Johnson');
再看在 View 中如何显示 Model 中的属性值，因为模板是用点操作来访问属性值的，所以 model 要调用 toJSON() 把属性值释放到第一层级上来。完整的渲染 Model 数据的例子如下：
 1<!DOCTYPE html>
 2<html>
 3     <head>
 4         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 5         <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
 6         <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
 7     </head>
 8     <body>
 9        <div id="container"></div>
10
11        <script type="text/template" id="person_template">
12            <%= name %>'s age is <%= age %>
13        </script>
14    </body>
15</html>
16 
17<script>
18    //定义 Model
19    var Person = Backbone.Model.extend({  
20        defaults : { //声明属性，并指定默认值
21            name : 'unknown',  
22            age : 20
23        }  
24    });
25
26    var PeopleView = Backbone.View.extend({
27        el: '#container',
28        initialize: function(options) {
29            this.render();
30        },
31        render: function() {
32            var template = _.template($("#person_template").html());
33            
34            //模板中使用点操作符来访问属性的，obj.name, 所以要 toJSON() 转换
35            this.$el.html(template(this.model.toJSON()));
36        }
37    });
38      
39    // 实例化 Model 对象  
40    var john = new Person({  
41        name : 'John'
42    });
43
44    john.set('age', 30);
45    john.age = 45; //这种方式赋值不管用的
46
47    var peopleView = new PeopleView({model: john});
48</script>

点击链接 http://jsfiddle.net/Unmi/4qXz7/ 执行代码可看到结果。上面代码在网页中输出为
John's age is 30

现实应用中，一般操作的都是 Model 所组成的集合，所以后面我们会用到 Backbone 的 Collection。这也是 Backbone 中一个重要的概念，继续中。

参考： 1. Backbone入门指南（四）：Model（数据模型）      
          2. 3. Defining models in backbone js – Learning Backbone js 永久链接 https://yanbin.blog/backbone-js-with-model/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。