Backbone.Model(模型)

  Models(模型)是任何Javascript应用的核心,包括数据交互及与其相关的大量逻辑: 转换、验证、计算属性和访问控制。Model在Backbone中为数据模型,是最基础,最根本的数据基类。

  创建一个模型对象

  extend Backbone.Model.extend(properties, [classProperties]) 

var World = Backbone.Model.extend({
initialize: function(){
console.log('创建了一个model对象')
}
});
var world = new World()

  设置和获取属性(数据)

  get model.get(attribute) 从当前model中获取当前属性(attributes)值。

  set model.set(attributes, [options]) 向model设置一个或多个hash属性(attributes)。如果任何一个属性改变了model的状态,在不传入 {silent: true} 选项参数的情况下,会触发 "change" 事件,更改特定属性的事件也会触发。

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
},
initialize: function(){
console.log('创建了一个model对象')
}
});
var world = new World()
console.log( world.get('age') ) //10
world.set({'age':50})
console.log( world.get('age') ) //50

  自定义方法 

var World = Backbone.Model.extend({
defaults: {
text: 'hello, world!'
},
say: function(){
console.log( this.get('text') )
}
});
var world = new World()
world.say() //hello, world!

  监听属性值的变化   

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
},
initialize: function(){
this.on('change:name',function(model,value){
var oldname = model.previous('name');
console.log('原来的名字是:'+ oldname +' ,现在的名字是:' + value)
})
}
});
var world = new World()
world.set({'name':'ccx'}) //原来的名字是:lbs ,现在的名字是:ccx

  数据验证

   validate model.validate(attributes, options)

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
},
initialize: function(){
this.on('invalid',function(model,error){
console.log(error);
});
},
validate: function (attrs) {
if( !_.isString(attrs.name) ) return '姓名必须是字符串';
if( !_.isNumber(attrs.age) ) return '年龄必须是数字';
}
});
var world = new World()
//根据验证规则(v1.0.0) {validate:true}
world.set({name:'ccx',age: 'three'},{validate:true}) //年龄必须是数字

   在调用set方法时,设置validate为true,开启数据验证不设置validate为true或者设置silent为true,关闭数据验证。

  删除属性(数据)

  unset model.unset(attribute, [options]) 从内部属性散列表中删除指定属性(attribute)。 如果未设置 silent 选项,会触发"change" 事件。

  clear model.clear([options]) 从model中删除所有属性, 包括id属性。 如果未设置 silent 选项,会触发 "change"事件。  

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
}
});
var world = new World()
world.unset('name')
console.log( world.get('name') ) //undefined
world.set({name:'ccx'})
console.log( world.get('name') ) //ccx
console.log( world.get('age') ) //10
world.clear()
console.log( world.get('name') ) //undefined
console.log( world.get('age') ) //undefined

  属性操作

  attributes model.attributes attributes 属性是包含模型状态的内部散列表(实例化后的模型对象的属性都保持在attributes属性对象中)。  

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
}
});
var world = new World()
console.log( world.attributes ) // Object {name: "lbs", age: 10}

  previous model.previous(attribute) 在 "change" 事件发生的过程中,本方法可被用于获取已改变属性的旧值。

  previousAttributes model.previousAttributes() 返回模型的上一个属性的副本。一般用于获取模型的不同版本之间的区别,或者当发生错误时回滚模型状态。

var World = Backbone.Model.extend({
defaults: {
name: 'lbs',
age: 10
}
})
var world = new World()
world.on('change:name',function(model,value){
var oldname = model.previous('name');
var newname = model.get('name');
console.log('原来的名字是:'+ oldname +',现在的名字是:'+ newname);
})
world.on('change:age',function(model,value){
var attrs = model.previousAttributes();
var oldage = attrs.age;
console.log('原来的年龄是:'+ oldage +',现在的年龄是:'+ value)
})
world.set({name:'ccx'}) //原来的名字是:lbs,现在的名字是:ccx
world.set({age: 50}) //原来的年龄是:10,现在的年龄是:50

  同步数据

   save model.save([attributes], [options]) 通过委托给Backbone.sync,保存模型到数据库(发送的客户端数据到服务器保存)

var World = Backbone.Model.extend({
url: 'backbone-test.php',
defaults: {
name: 'lbs',
age: 10
}
})
var world = new World()
world.set({name:'ccx',age: 50})
//world.save()
world.save(null,{
success: function(model,response){
console.log( response.code )
}
}) //php文件 //设置接收数据的格式
header('Content-Type: application/json; charset=utf-8');
//获取客户端发送来的数据
$data = json_decode(file_get_contents("php://input"));
/*
获取各个属性值,保存至服务器中
*/
//返回更新成功的标志
die(json_encode(array('code'=>'0')));

  fetch model.fetch([options]) 通过委托给Backbone.sync从服务器重置模型的状态(获取服务器的数据)

var World = Backbone.Model.extend({
url: 'backbone-test.php',
defaults: {
name: 'lbs',
age: 10
}
})
var world = new World()
world.fetch({
success: function(model,response){
console.log( world.toJSON() ) //Object {name: "ccx", age: 20, code: 1}
},
error: function(error){
console.log( error )
}
}) //php文件
$json = array('name'=>'ccx','age'=>20,'code'=>1);
echo json_encode($json);

  destroy model.destroy([options]) 通过委托给Backbone.sync,保存模型到数据库

   当调用destroy方法时,将以DELETE请求方式向服务器发送对象的ID数据,服务器接收数据后删除对应的数据记录,并向客户端发送删除成功的标志。

var World = Backbone.Model.extend({
url: 'backbone-test.php',
defaults: {
name: 'lbs',
age: 10
},
idAttribute: 'code'
})
var world = new World({
'code': 110
})
world.destroy({
success: function(model,response){
if(response.code == '0'){
console.log( model.get('code') +'数据已经删除' ) // 110数据已经删除
}
},
error: function(error){
console.log( error )
},
wait: true
}) //php文件
echo json_encode(array('code'=>0));

认识Backbone (二)的更多相关文章

  1. 【 js 基础 】【 源码学习 】backbone 源码阅读(二)

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 ...

  2. Backbone源码分析(二)

    在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码 ...

  3. 前端MVC框架Backbone 1.1.0源码分析(二) - 模型

    模型是什么? Models are the heart of any JavaScript application, containing the interactive data as well a ...

  4. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  5. backbone学习总结(二)

    今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...

  6. TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理

    当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数 ...

  7. Backbone源码解析(二):Model(模型)模块

    Model(模型)模块在bk框架中的作用主要是存储处理数据,它对外和对内都有很多操作数据的接口和方法.它与视图(Views)模块精密联系着,通过set函数改变数据结构从而改变视图界面的变化.下面我们来 ...

  8. Backbone.js学习之二

    经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...

  9. 用Backbone.js创建一个联系人管理系统(二)

    欢迎大家回来继续这一教程,第一部分我们学习了model,collection和view在Backbone中的 基本用法,还有怎么样用主视图去绑定collection去渲染出每个Contact. 这部分 ...

随机推荐

  1. 编程算法 - 萨鲁曼的军队(Saruman&#39;s Army) 代码(C)

    萨鲁曼的军队(Saruman's Army) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 直线上有N个点, 每个点, 其距离为R以内的区域里 ...

  2. 端口映射工具 redir/socat/xinetd - 运维技术 - 开源中国社区

    端口映射工具 redir/socat/xinetd - 运维技术 - 开源中国社区 端口映射工具 redir/socat/xinetd    10人收藏此文章, 我要收藏 发表于3天前(2013-08 ...

  3. Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products

    Amazon.com: NEW VI AND VIM EDITOR KEYBOARD STICKER: Office Products NEW VI AND VIM EDITOR KEYBOARD S ...

  4. 使用Swing实现简易而不简单的文档编辑器

    本文通过Swing来实现文档简易而不简单的文档编辑器,该文档编辑器的功能包括: 设置字体样式:粗体,斜体,下划线,可扩展 设置字体:宋体,黑体,可扩展 设置字号:12,14,18,20,30,40, ...

  5. hdu1896之优先队列应用

    Stones Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Sub ...

  6. VSTO 学习笔记(十)Office 2010 Ribbon开发

    原文:VSTO 学习笔记(十)Office 2010 Ribbon开发 微软的Office系列办公套件从Office 2007开始首次引入了Ribbon导航菜单模式,其将一系列相关的功能集成在一个个R ...

  7. Redis 安装与简单示例(转)

    本文转载自:http://www.cnblogs.com/kissdodog/p/3570984.html Redis的安装 Redis下载地址如下:https://github.com/dmajki ...

  8. elf 文件格式探秘——程序运行背后的故事

    摘要:本文主要讲解elf文件格式,通过readelf命令结合底层的相关数据结构,讲解相关内容,分析程序运行的基本原理. 本文来源:elf 文件格式探秘——程序运行背后的故事 http://blog.c ...

  9. POJ 2524 :Ubiquitous Religions

    id=2524">Ubiquitous Religions Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 231 ...

  10. 公司需求知识自学-Oracle的Package的作用及用法

    Oracle的Package的作用 简化应用设计.提高应用性能.实现信息隐藏.子程序重载. 1.Oracle的Package除 了把存储过程放到一堆儿以外还有没有其他的作用(好处)? 你不觉得把存储过 ...