认识Backbone (二)

标签：

　　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 (二)

标签：

原文地址：http://www.cnblogs.com/rainbowcode/p/4691671.html