我们将通过一个一个小实例来逐步学习Mode
首先定义一下整体的页面结构
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
<script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>
<script>
(function ($) {
/**
*此处填充代码下面练习代码
**/
})(jQuery);
</script>
</html>
一、 extend 的理解使用
extend 就是创建自己的 model 类，可以正确的设置原型链，因此通过 extend 创建的子类 (subclasses) 也可以被深度扩展。
extend方法接受两个参数： Backbone.Model.extend(protoProps, staticProps)
参数1：protoProps，为子类的原型prototype提供属性 ，也就是创建实例方法
参数2：staticProps，为子类自身提供属性 ，也就是创建静态方法
var M = Backbone.Model.extend({
a: function () { //实例
console.log('a');
}
}, {
b: function () { //静态方法
console.log('b');
}
});
var model = new M;
model.a(); // a
M.b(); // b
二.、初始化 - initialize
initialize 就相当于构造函数，在函数实例化时被调用，当然不写也不会有啥子影响
var bab= Backbone.Model.extend({
initialize: function(params){
cosnole.log(params); // test
alert('Hey, you create me!');
}
});
var Bab= new bab('test');
三、 为模型指定默认属性 - defaults
var bab = Backbone.Model.extend({
initialize: function(){
alert('Hey, you create me!');
},
defaults: {
name:'张三',
age: '38'
}
})
上面我们设置了默认属性，那么改如何取用和重新设置尼？
- 取值 - get 、attributes
和正常的构造函数有点不一样，这里取用默认属性用的是 get方法， 而不是直接 this.name 这种。
显然属性在Model是以字典（或者类似字典）的方式存在的。
可以理解成map 结构的取用.
或者利用 attributes 取用
var bab = Backbone.Model.extend({
initialize: function(){
console.log('Hey, you create me!');
this.test()
},
defaults: {
name:'张三',
age: '38'
},
test : function(){
console.log(this.attributes.name) // 张三
console.log(this.name); // undefined
console.log(this.get('name')); // 张三
}
});
var Bab = new bab();
console.log(Bab.get('name')) // 张三
- 设置 - set
set 的使用方法也与 get 等同，attributes 也可以进行设置（不建议如此赋值）
var bab = Backbone.Model.extend({
initialize: function(){
console.log('Hey, you create me!');
this.test()
},
defaults: {
name:'张三',
age: '38'
},
test : function(){
this.set({name : '777'});
console.log(this.get('name')); // 777
}
});
var Bab = new bab();
Bab.set({name:'change',age:'10',haha : '123'});
Bab.attributes.name = '王二麻子';
console.log(Bab.get('age')) // 10
console.log(Bab.get('name ')) // 王二麻子
console.log(Bab.get('haha')) // 123
四、监听对象中属性的变化 - change
var bab = Backbone.Model.extend({
initialize: function(){
//初始化时绑定监听
this.bind("change:name",function(){
alert("你改变了name属性");
});
this.test();
},
defaults: {
name:'张三',
age: '38'
},
test : function(){
this.set({name : '777'});
console.log(this.get('name')); // 777
}
});
var Bab = new bab();
当对象name 被set 重新赋值时，change 事件就开始执行了。
这里有一点需要注意，如果 对象改变发生在监听事件以前，则监听不到，也就是说如果 将 this.test() 写在change 之前，监听则不会执行。
或者在实例后调用
var Chapter = Backbone.Model.extend({
defaults:{
name : 18
}
});
var cha = new Chapter;
cha.on("change:name", function(model,name) {
console.log(model) // 就是cha 的值
console.log(name) // 5
});
cha.set({name:5});
五、验证规则 - validate
为对象属性添加验证规则，invalid 事件
var Chapter = Backbone.Model.extend({
initialize : function(){
// 监听验证事件
this.bind("invalid",function(model,error){
alert(error);
});
},
defaults:{
age : 18
},
validate: function (attrs) {
if (attrs.age < 20) {
return "年龄不到20";
}
}
});
var cha = new Chapter;
//save时触发验证,此时也可以赋值
cha.save({
age : 25
});
如果使用set对属性进行修改，set 后添加 {validate : true} 也可以调用
var cha = new Chapter;
cha.set({age : 22},{validate : true});
同样，与上面的change 类似，validate 也可以在实例化后调用
var Chapter = Backbone.Model.extend({
defaults:{
age : 18
},
validate: function (attrs) {
if (attrs.age < 20) {
return "年龄不到20";
}
}
});
var cha = new Chapter;
cha.on('invalid',function(model,error){
console.log(model); // 就是cha的值
console.log(error); // 年龄不到20
})
cha.save()
注意: 我这里犯了一个错误
因为我在validate 函数中当判断为false 时没有返回值，所以save 执行时就报错了，但是如果使用 set 后加 {validate : true} 的方式，却不会报错。
除了 invalid 的方式，bab 还提供了isValid 来检查模型状态。
var Chapter = Backbone.Model.extend({
defaults:{
age : 18
},
validate: function (attrs) {
if (attrs.age < 20) {
return "年龄不到20";
}
return "你太大了";
}
});
var cha = new Chapter;
// cha.set({age : 25});
if (!cha.isValid()) {
alert(cha.validationError); // validationError 就是上面的错误提示
}
// 此时就不用save 等方式来触发验证了
六、服务器进行交互 - url
man1.fetch({url:'/man/',
success:function(model,response){
alert('success');
//model为获取到的数据
alert(model.get('name'));
},error:function(){
//当返回格式不正确或者是非json数据时，会执行此方法
alert('error');
}
});
这里有一点不明觉厉，单看上面的例子没有什么问题，但是这里还引入一个save, urlRoot 这些东西，个人觉得还不如直接用ajax 。（如果后面有其他了解再补充吧）
或者看看人家怎么说的 https://www.cnblogs.com/linjiqin/p/3711866.html
七、删除数据
- unset()方法用于删除对象中指定的属性和数据
- clear()方法用于删除模型中所有的属性和数据
在调用unset()和clear()方法清除模型数据时，会触发change事件，我们也同样可以在change事件的监听函数中通过previous()和previousAttributes()方法获取数据的上一个状态。
八、其他
- preinitialize
For use with models as ES classes. If you define a preinitialize method, it will be invoked when the Model is first created, before any instantiation logic is run for the Model.
如果模型作为class 类调用，预初始化时被执行，和 initialize 就是启动先后的关系
- escape
有点类似get,但返回模型属性的html转义版本
var bab = Backbone.Model.extend({
defaults: {
name:'<div>18</div>'
}
});
var Bab = new bab();
console.log(Bab.escape('name')) // <div>18</div>
console.log(Bab.get('name')) // <div>18</div>
- has
判断属性是否存在
var bab = Backbone.Model.extend({
defaults: {
name:'<div>18</div>'
}
});
var Bab = new bab();
console.log(Bab.has("name")) // true
console.log(Bab.has("age")) // false
其他的api 像hasChanged、changedAttributes 等等，从字面上就可以理解，不做记录了。
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
