前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充，其实这已经很接近 Model 了。现在来学习怎么创建自己的 Model 类，并简单的使用。Backbone.js 中 Model 会涉及到很多的概念，如 Model 的初始化，默认值，属性的读写，属性值改变的监听，数据渲染，校验，以及与服务端的数据同步等。
本文不打算讲前面大部分的内容，最初思考的一个脉络是怎么把 Model 引入进来，所以线索会是 建立 Model 类 -> 初始化 Model 实例 -> 设置值 -> 渲染到页面，其余 Model 特性分别再深入。
直观地能想到的 JavaScript 的 Model 是一个 JSON 对象，差不多，不过 Backbone 赋予 Model 默认属性，只能通过 getter/setter 方法来访问 Model 中的属性值，不能直接用点操作符，相当于 Backbone 的属性是私有的。
声明 Model 类
|
1 2 3 4 5 6 |
var Person = Backbone.Model.extend({ defaults : { //看上去是指定默认值，同时也是声明有些什么属性 name : 'unknown', age : 20 } }); |
使用 Model
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 实例化 Model 对象 var john = new Person({ name : 'John' //没有指定 age，默认为 20 }); console.log("1: " + john.name); //undefined console.log("2: " + john.get('name')); //john console.log("3: " + john.get('age')); //20 john.age = 45; //这种方式赋值, 不能设置到 john.attributes 中去 console.log("4: " + john.get('age')); //20 john.set({age: 100}); console.dir(john); |
上面输出为
因为存储的字段都在对象的 attributes 的属性中，所以不能简单的用点操作来存取值，而要使用
john.get('name');
john.escape('name'); //可转义 HTML 标签
john.set({name: 'Johnson'});
john.set('name', 'Johnson');
再看在 View 中如何显示 Model 中的属性值，因为模板是用点操作来访问属性值的，所以 model 要调用 toJSON() 把属性值释放到第一层级上来。完整的渲染 Model 数据的例子如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script> </head> <body> <div id="container"></div> <script type="text/template" id="person_template"> <%= name %>'s age is <%= age %> </script> </body> </html> <script> //定义 Model var Person = Backbone.Model.extend({ defaults : { //声明属性，并指定默认值 name : 'unknown', age : 20 } }); var PeopleView = Backbone.View.extend({ el: '#container', initialize: function(options) { this.render(); }, render: function() { var template = _.template($("#person_template").html()); //模板中使用点操作符来访问属性的，obj.name, 所以要 toJSON() 转换 this.$el.html(template(this.model.toJSON())); } }); // 实例化 Model 对象 var john = new Person({ name : 'John' }); john.set('age', 30); john.age = 45; //这种方式赋值不管用的 var peopleView = new PeopleView({model: john}); </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 Blog
[版权声明] 
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。