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 类
var Person = Backbone.Model.extend({
defaults : { //看上去是指定默认值,同时也是声明有些什么属性
name : 'unknown',
age : 20
}
});
使用 Model
// 实例化 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')); // john.age = 45; //这种方式赋值, 不能设置到 john.attributes 中去
console.log("4: " + john.get('age')); // 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 数据的例子如下:
<!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 中一个重要的概念,继续中。
本文链接 http://unmi.cc/backbone-js-with-model/, 来自 隔叶黄莺 Unmi Blog
Backbone.js 中使用 Model的更多相关文章
- Backbone.js 中的Model被Destroy后,不能触发success的一个原因
下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到dest ...
- Backbone.js学习之Model
首先,我们看一下官方文档中对Model的解释(或者说定义): Models are the heart of any JavaScript application, containing the in ...
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...
- Backbone.js中的where和findWhere
小编的公司框架用的MVC框架依旧是Backbone.js,老大说框架不重要,重要的是框架的编程思想.于是乎,小编从头开始学习Backbone.走马观花似的看了下API文档,撸起袖子就是干.但是碰到一个 ...
- 谈谈Backbone.js中的el
小编最近开始接触backbone.js,这个曾经非常优秀的一款MVC前端框架,在学习的过程中,遇到下图的这样一个问题 下面上代码 小编的想法很简单,只是view了一个实例,然后在initalize中调 ...
- Backbone.js入门教程
原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...
- 用Backbone.js创建一个联系人管理系统(一)
原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...
- Backbone.js的技巧和模式
Backbone.js的技巧和模式 Backbone.js的技巧和模式 本文由白牙根据Phillip Whisenhunt的<Backbone.js Tips And Patterns> ...
- Backbone.js源码浅介
终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...
随机推荐
- bzoj 1455 可并堆+并查集
一个堆和一个并查集对应,并且满足并查集中所有没有死的人等于堆中的人 /************************************************************** Pr ...
- Python 訪问 LinkedIn (API)
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-16 @author: guaguastd @name: l ...
- Go 语言中的 new() 和 make()的区别
本文是看了文章之后的心得. 在此感谢. 概述 Go 语言中的 new 和 make 一直是新手比较容易混淆的东西,咋一看很相似.不过解释两者之间的不同也非常容易. 他们所做的事情,和应用的类型也不相同 ...
- USB设备的插入和弹出的监听以及软弹出可移动媒体(如Windows的移除USB设备) .
一.监听USB设备的插入和弹出 当USB设备插入或者弹出时,Windows会产生一条全局消息:WM_DEVICECHANGE 我们需要做的是,获得这条消息的wParam参数,如果为DBT_DEVICE ...
- Revit API布置卫浴装置
//放置卫浴装置 [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] public clas ...
- redis for windows安装
redis for windows安装 到下面的地址,下载REDIS FOR WINDOWS https://github.com/MicrosoftArchive/redis/releases 下载 ...
- Java 下载文件
public @ResponseBody void exportExcel(HttpServletRequest request, HttpServletResponse response, Khxx ...
- 【CentOS】centos如何修改你的主机名
转载地址:https://www.linuxidc.com/Linux/2014-11/109238.htm ============================================= ...
- java List集合记录 ArrayList和LinkedList的区别
一般大家都知道ArrayList和LinkedList的大致区别: 1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问 ...
- Android应用icon和闪屏splash的尺寸
icon (尺寸为px) 目录 尺寸 (width * height) drawable 72 x 72 drawable-hdpi 72 x 72 drawable-ldpi 36 x 36 dra ...