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));