![Backbone - 眷恋天空的驴 - 眷恋天空的驴! Backbone - 眷恋天空的驴 - 眷恋天空的驴!](http://img1.ph.126.net/T5VelrpkK6oXcbIpERGyEQ==/6631822030677138886.png)
上面简单的定义了一个最基础的Model,实现了initialize这个初始化方法,也称之为构造函数,这个构造函数默认是在Model被实例化的时候调用。var Man = Backbone.Model.extend({
initialize: function(){
alert( 'Hello Backbone!' );
}
});
var man = new Man();
var Man = Backbone.Model.extend({
initialize: function(){
alert( 'Hello Backbone!' );
},
defaults: {
name: 'anikin',
age: 23
}
});
var man = new Man();
alert( man.get('name') ); // Hello Backbone! anikin
3. 自定义方法:var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, Backbone ');
}
});
var man = new Man;
man.set({ name: 'anikin', age:'12' }); // 给defaults进行赋值
alert( man.get('age') )
4, 监听事件属性的变化var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, Backbone '+ this.defaults.name);
},
defaults:{
name: 'anikin',
age: 12
},
aboutMe: function(){
return 'name is '+ this.get('name')+'age si '+ this.get( 'age' );
}
});
var man = new Man
alert( man.aboutMe() )// 静态方法跟实例化方法
var Model = new Backbone.Model();
var Models = new Backbone.Collection();
var View = new Backbone.View();
var M = Backbone.Model.extend({
// 实例方法
aaa: function(){
alert(1)
}
},{
// 静态方法
bbb: function(){
alert(2)
}
})
var m = new M();
m.aaa();
M.bbb();
5,为对象添加验证规则以及错误提示var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, Backbone '+ this.defaults.name);
this.bind( 'change:name',function(){
var name = this.get('name');
alert('你改变了name为'+name)
});
},
defaults:{
name: 'anikin',
age: 12
}
});
var man = new Man
man.set({ name: 'jj' }); // 这里就会触发change事件
6. 远程的数据请求也是在这个model中来完成的。var Man = Backbone.Model.extend({
initialize: function(){
alert('Hey, Backbone '+ this.defaults.name);
this.bind( 'change:name',function(){
var name = this.get('name');
alert('你改变了name为'+name)
});
this.bind( 'invalid',function( model,error ){
alert(error);
console.log(model);
})
},
defaults:{
name: 'anikin',
age: 12
},
validate:function( a ){
if( a.name == '' ){
return 'name 不能为空'
}
}
});
var man = new Man
/* 另一种写法
man.on('invalid', function(model, error){
alert(error);
});*/
man.set({name:''}, {'validate':true}) // 主动触发
var M = Backbone.Model.extend({
defaults: {
name: 'anikin'
},
aaa: function(){
alert(1)
}
});
var Child = M.extend();
var c = new Child;
alert( c.get('name') );
c.aaa();
VIEWvar Book = Backbone.Model.extend({
defaults:{
title: 'anikin'
},
initialize: function(){
alert(1)
}
});
var BookShelf = Backbone.Collection.extend({
model:Book
});
var book1 = new Book({title : 'book1'});
var book2 = new Book({title : 'book2'});
var book3 = new Book();
var bookShelf = new BookShelf([book1, book2, book3]);
//基于underscore这个js库,还可以使用each的方法获取collection中的数据
bookShelf.each(function(book){
alert(book.get('title'));
});
$().ready(function(e) {
var M = Backbone.Model.extend({
defaults:{
name: 'anikin',
age:23
}
});
var V = Backbone.View.extend({
initialize: function(){
this.listenTo( this.model, 'change',this.show );
},
show: function( model ){
$('body').append( '<div style="color:red;">'+model.get('name')+'</div>' )
}
});
var m = new M;
var v = new V({ model: m });
m.set({ name: 'hi' })
});