Backbone.js 中使用 Model

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

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

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

声明 Model 类

使用 Model

上面输出为

Backbone_Model_Operation

因为存储的字段都在对象的 attributes 的属性中,所以不能简单的用点操作来存取值,而要使用

john.get('name');
john.escape('name');  //可转义 HTML 标签
john.set({name:  'Johnson'});
john.set('name', 'Johnson');

再看在 View 中如何显示 Model 中的属性值,因为模板是用点操作来访问属性值的,所以 model 要调用 toJSON() 把属性值释放到第一层级上来。完整的渲染 Model 数据的例子如下:

点击链接 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

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments