Backbone.js学习之Model
首先,我们看一下官方文档中对Model的解释(或者说定义):
Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.
翻译成中文就是:
Model是js应用的核心,包括交互数据以及围绕着这些数据的大部分逻辑:数据转换、验证、属性计算和访问控制。你可以使用特定方法来扩展Backbone.Model,并且Model本身就提供了一系列基本的管理功能。
然后,我们还在文档中看到Model拥有好多方法,这里就不一一介绍了。
简单的Model例子
定义了一个最基础的Model,只是实现了initialize这个初始化方法。这个函数会在Model被实例化时调用。
var Man = Backbone.Model.extend({
constructor: function(){
alert('Hey, you create me!');
}
});
var man = new Man;
初始化函数,也可以叫构造函数。比如你这里完全可以把constructor写成initialize,效果是一样的。至于为什么一样?这还得等到熟悉这个框架过后看看Backbone源码才能知道。
Molde对象属性赋值的两种方法
一种是设置默认值
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张三',
age: '38'
}
});
var man = new Man;
console.info(man.get("name"));
或者这样赋值
man.set({name:'the5fire',age:'10'});
console.info(man.get("name"));
console.info(man);
从这个对象的取值方式可以知道,属性在一个Model是以字典(或者类似字典)的方式存在的,第一种设定默认值的方式,只不过是实现了Backbone的defaults这个方法,或者是给defaults进行了赋值。通过打印出man这个对象,我们可以发现,属性是存在一个叫做attributes的对象中的。
Model对象中的方法
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张三',
age: '38'
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;
alert(man.aboutMe());
也是比较简单,只是增加了一个新的属性,值是一个function。说到这,不知道你是否发现,在所有的定义或者赋值操作中,都是通过字典的方式来完成的,比如extend Backbone的Model,以及定义方法,定义默认值。方法的调用和其他的语言一样,直接 "." 即可,参数的定义和传递也一样。
监听Model对象中属性的变化
假设你有在对象的某个属性发生变化时去处理一些业务的话,下面的示例会有帮助。依然是定义那个类,不同的是我们在构造函数中绑定了name属性的change事件。这样当name发生变化时,就会触发这个function。
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为:" + name);
});
},
defaults: {
name:'张三',
age: '38'
}
});
var man = new Man;
//触发绑定的change事件,alert。
man.set({name:'the5fire'});
//触发绑定的change事件,alert。
man.set({name:'the5fire.com'});
为Model对象添加验证规则,以及错误提示
var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
//初始化时绑定监听, change事件会先于validate发生
this.bind("change:name",function(){
var name = this.get("name");
alert("你改变了name属性为:" + name);
});
this.bind("invalid",function(model,error){
alert(error);
});
},
defaults: {
name:'张三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空!";
}
}
});
var man = new Man;
// 这种方式添加错误处理也行
// man.on('invalid', function(model, error){
// alert(error);
// });
//默认set时不进行验证
man.set({name:''});
//save时触发验证。根据验证规则,弹出错误提示。
man.save();
//手动触发验证, set时会触发
man.set({name:'moyi'}, {'validate':true});
//验证通过时信息
if (man.isValid()) {
alert(man.get("name")+"验证通过");
}
和服务器进行交互,Model对象的保存和获取
由于本人比较懒,这里就暂时不去折腾服务器了。交互数据这些东西就用jquery-mockjax模拟一下得了(PS:前面有写过一篇关于mockjax的文章)。
这里AJAX请求模拟
var isAjaxMocked = true;
if (isAjaxMocked) {
$.mockjax({
url: '/man/read',
status: 200,
type: "get",
responseTime: 100,
responseText: {'name': 'Moyi', 'age': '1111'}
});
$.mockjax({
url: '/man/update',
status: 200,
type: "post",
responseTime: 100,
responseText: {'name': 'qianlan', 'age': '11'}
});
}
// 和服务器进行交互,对象的保存和获取
var Man = Backbone.Model.extend({
url:'/man/update',
initialize: function(){
console.log('Hey, you create me!');
//初始化时绑定监听
this.bind("change:name",function(){
var name = this.get("name");
console.log("你改变了name属性为:" + name);
});
this.bind("error",function(model,error){
console.log(error);
});
},
defaults: {
name:'张三',
age: '38'
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空!";
}
},
aboutMe: function(){
return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
}
});
var man = new Man;;
man.set({name:'the5fire'});
//会发送POST到模型对应的url,数据格式为json{"name":"the5fire","age":38}
// man.save();
man.save({"name":"the5fire","age":38},{url:'/man/update',
success:function(model,response){
console.log('success');
//model为获取到的数据
console.log(model.get('name')+" and "+model.get('age'));
},error:function(){
//当返回格式不正确或者是非json数据时,会执行此方法
console.log('error');
}
});
//然后接着就是从服务器端获取数据使用方法fetch([options])
var man1 = new Man;
//第一种情况,如果直接使用fetch方法,
//那么他会发送get请求到你model的url中,
//你在服务器端可以通过判断是get还是post来进行对应的操作。
// man1.fetch();
//第二种情况,在fetch中加入参数,如下:
// man1.fetch({url:'/man/read'});
//这样,就会发送get请求到/getmans/这个url中,
//服务器返回的结果样式应该是对应的json格式数据,同save时POST过去的格式。
//不过接受服务器端返回的数据方法是这样的:
man1.fetch({url:'/man/read',
success:function(model,response){
console.log('success');
//model为获取到的数据
console.log(model.get('name')+" and "+model.get('age'));
},error:function(){
//当返回格式不正确或者是非json数据时,会执行此方法
console.log('error');
}
});
Model部分暂时就到这里,总的来说,Model就是对数据以及和数据有关的逻辑的一些处理。
Backbone.js学习之Model的更多相关文章
- 【转】Backbone.js学习笔记(二)细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...
- Backbone.js学习之二
经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...
- Backbone.js学习之初识hello-world
说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...
- Backbone.js 中使用 Model
前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...
- 【转】Backbone.js学习笔记(一)
文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...
- Backbone.js学习之Backbone.View(视图)
Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...
- Backbone.js学习之一
昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...
- backbone.js学习笔记
之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...
- Backbone.js学习之View
千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...
随机推荐
- 10635 - Prince and Princess
Problem D Prince and Princess Input: Standard Input Output: Standard Output Time Limit: 3 Seconds In ...
- 【转】 解决IllegalStateException: Can not perform this action after onSaveInstanceState
今天使用Fragment的时候,出现了这个错误 IllegalStateException: Can not perform this action after onSaveInstanceState ...
- 高斯混合和EM算法
首先介绍高斯混合模型: 高斯混合模型是指具有以下形式的概率分布模型: 一般其他分布的混合模型用相应的概率密度代替(1)式中的高斯分布密度即可. 给定训练集,我们希望构建该数据联合分布 这里,其中是概率 ...
- sql注入在线检測(sqlmapapi)
之前一搞渗透的同事问我.sqlmapapi.py是干啥的,我猜非常多人都玩过sqlmap,但玩过sqlmapapi的应该比較少,今天就和大家一起看看怎样使用以及一些美的地方. 说白了.sqlmapap ...
- 【UML】具体解释六种关系
UML中包括六中关系.各自是:关联(Association).聚合(Aggregation).组合(Composition).泛化(Generalization).依赖(Dependency).实现( ...
- javascript Arguments对象——函数的实际参数
在javascript函数体内,标识符arguments具有特殊含义.它是调用对象的一个特殊属性,用来引用Arguments对象.Arugments对象就像数组,注意这里只是像并不是哈. javasc ...
- 0c-37-ARC
.什么是ARC? Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入的最大的变革和最激动人心的变化.ARC是新的LLVM .0编 ...
- jquery 验证控件
最近应公司要求做了一个jquery的示例文件,包括:模态窗口怎么实现:jquery validate下的校验:怎么做图片特效:怎么实现异步操作:实现图片上传剪切效果等很多特效: 这里把jquery校验 ...
- memcachedb-持久化存储的缓存系统
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度.Memcached ...
- IOS UItableView 滚动到底 触发事件
开发过程中,在使用UItableView 总会遇到加载更多的问题,到底是手势响应瀑布流的方法好? 还是添加一个底端cell点击触发加载更多好?我也想有自己的判断.但是我们老板总说了算,没办法,谁叫我给 ...