#Backbone学习笔记（一）--模型（model）

Backbone学习笔记（一）–模型（model）

Backbone模型包含应用程序里的数据以及与数据相关的逻辑。例如，用一个模型来表示一个待处理项（todo item）（如复选框），包含了todo的内容（如复选框的title）和todo的状态（如复选框是否被选中）之类的属性。

可以通过Backbone.Model来创建该模型

var Todo = Backbone.Model.extend({});

//创建一个不含任何值的模型实例
var todo1 = new Todo();
console.log(JSON.stringify(todo1))
// 输出 {}

//创建一个包含一些属性的模型实例
var todo2 = new Todo({
    title: 'test',
    checked: true
});
console.log(JSON.tostringify(todo2));
// {"title":"test","checked":true}

1.初始化

创建一个新模型实例的时候，会调用initialize()方法。

var Todo = Backbone.Model.extend({
    initialize:function() {
        console.log('This model has been initialized.')
    }
});

var newTodo = new Todo();
//Logs:This model has been initialized.

2.默认值

可以通过使用模型里的defaults属性来设置默认值。

var Todo = Backbone.Model.extend({
    //todo的默认属性值
    defaults: {
        title:'',
        checked: false
    }
});

//创建todo模型实例
var todo1 = new Todo();
console.log(JSON.stringify(todo1));
//{{"title":"","checked":false}

var todo2 = new Todo({
    title: 'test'
});
console.log(JSON.stringify(todo2));
//{"title":"test","checked":false}

var todo3 = new Todo({
    title: 'test',
    checked: true
});
console.log(JSON.stringify(todo3));
//{"title":"test","checked":true}

3.赋值与取值

1.Model.get()

Model.get()用于访问模型的属性。

var Todo = Backbone.Model.extend({
    defaults: {
        title:'',
        checked: false
    }
});

var todo1 = new Todo();
console.log(todo1.get('title')); //空串
console.log(todo1.get('checked')); // false

var todo2 = new Todo({
    title: 'newTitle',
    checked: true
});

console.log(todo2.get('title')); //newTitle
console.log(todo2.get('checked')); // true

2.Model.set()

Model.set()是在模型上设置一个包含一个或多个属性的Hash散列，当其中任意属性更改模型的状态时，就会在上面触发change事件。每个属性的change时间也可以在模型上进行触发和绑定。

var Todo = Backbone.Model.extend({
    defaults: {
        title:'',
        checked: false
    }
});

var todo = new Todo({
    title:'Model.set()'
});
console.log(todo.get('title')); // Model.set()
console.log(todo.get('checked')); // false

//设置单一属性
todo.set('title', 'setTitle');
console.log(todo.get('title')); // setTitle
todo.set('checked', true);
console.log(todo.get('checked')); // true

//设置多个属性
todo.set({
    title: 'setNewTitle',
    checked: false
})
console.log(todo.get('title')); // setNewTitle
console.log(todo.get('checked')); // false

3.直接访问

模型暴露了一个.attributes属性，描述包含该模型状态的一个hash散列。通常和服务器返回数据的JSON对象的形式一样，但也可以采用其他形式。

如果通过模型上的.attributes属性设置值，可以绕过该模型上绑定的触发器

修改成{silent:true}不会触发change:attr事件。

var Person = new Backbone.Model();

Person.set({name: 'Tom'});
console.log(!Person.hasChanged('name')); // false
console.log(!Person.hasChanged('')); // true

Person.set({name: 'Tom'}, {silent:true});
console.log(!Person.hasChanged('name')); // true
console.log(!Person.hasChanged('')); // true

4.监听模型变化

模型改变的时候，如果我们想得到一个通知，可以通过监听该模型上的change事件来实现。可以把监听器添加到initialize()函数中。

var Todo = Backbone.Model.extend({
    defaults: {
        title:'',
        checked: false
    },
    initialize: function() {
        console.log('This model has been initialized');
        this.on('change', function(){
            console.log('values has been changed');
        });
    }
});

var todo = new Todo(); 
// Logs: This model has been initialized

todo.set('title', 'newTitle'); 
// Logs: values has been changed
console.log(todo.get('title')); 
// newTitle

todo.set('checked', true); 
// Logs: values has been changed
console.log(tod.get('checked')); 
// true

//一次改变多个属性，只触发一次监听函数
todo.set({
    title: newnewTitle,
    checked: false
});
//Logs: values has been changed
console.log(todo.get('title'));
//newnewTitle
console.log(todo.get('checked'));
//false

在Backbone模型中，也可以监听单个属性的改变。

var Todo = Backbone.Model.extend({
    defaults: {
        title:'',
        checked: false
    },
    initialize: function() {
        console.log('This model has been initialized');
        this.on('change:title', function(){
            console.log('Title has been changed');
        });
    },
    setTitle: function(newTitle) {
        this.set({title: newTitle});
    }
});

var todo = new Todo();
//Logs: This model has been initialized

todo.set('title','newTitle');
//Logs: Title has been changed
todo.setTitle('newnewTitle');
//Logs: Title has been changed

todo.set('checked', true);
console.log(todo.get('checked'));
//true

5 验证

Backbone支持通过model.validate()进行模型验证，允许在设置属性值之前对属性进行检查。默认情况下，通过调用sava()方法或带有{validate:true}参数的set()方法持久化模型时，验证会触发。

var Person = new Backbone.Model({
    name: 'Tom',
    age: '10'
});

//验证模型name属性
Person.validate = function(attrs) {
    if(!attrs.name) {
        return 'I need your name';
    }
}

//修改name属性的内容
Person.set({
    name: 'Jerry'
});
console.log(Person.get('name'));
// Jerry

/*使用unset()方法删除name属性时使用验证删除失败，因为删除name属性后无法通过验证。
传递给validate()函数的attribute队形表示的是在执行操作后（如set()，save(), unset()等操作）后model的结果。与model当前的结果不同。*/
Person.unset('name', {validate: true});
//Logs: false
console.log(Person.get('name'));
// Jerry

//删除name属性
Person.unset('name');
console.log(Person.get('name'));
// undefind

Person.unset('age', {validate: true});
//Logs: false
// name属性不存在，无法通过验证
console.log(Person.get('age'));
// 10