详解Backbone.js框架中的模型Model与其集合collection
什么是Model
Backbone的作者是这样定义Model的:
Model是任何一个web应用的核心,它包含了交互的数据以及大部分的逻辑。例如:转化、验证、属性和访问权限等。
那么,我们首先来创建一个Model:
Person=Backbone.Model.extend({ initialize:function(){ alert("WelcometoBackbone!"); } }); varperson=newPerson;
上述代码中,我们定义了一个名为Person的Model,实例化后,得到person。任何时候当你实例化一个Model,都会自动触发initialize()方法(这个原则同样适用于collection,view)。当然,定义一个Model时,并非强制要求使用initialize()方法,但是随着你对Backbone的使用,你会发现它不可或缺。
设置Model属性
现在我们想在创建Model实例时传递一些参数用来设置Model的属性:
Person=Backbone.Model.extend({ initialize:function(){ alert("WelcometoBackbone!"); } }); //在实例化Model时直接设置 varperson=newPerson({name:"StephenLee",age:22}); //我们也可以在Model实例化后,通过set()方法进行设置 varperson=newPerson(); person.set({name:"StephenLee",age:22});
获得Model属性
使用Model的get()方法,我们可以获得属性:
Person=Backbone.Model.extend({ initialize:function(){ alert("WelcometoBackbone!"); } }); varperson=newPerson({name:"StephenLee",age:22}); varage=person.get("age");//22 varname=person.get("name");//"StephenLee"
设置Model默认属性
有时你希望Model实例化时本身就包含一些默认的属性值,这个可以通过定义Model的defaults属性来实现:
Person=Backbone.Model.extend({ defaults:{ name:"LebronJames", age:30, }, initialize:function(){ alert("WelcometoBackbone!"); } }); varperson=newPerson({name:"StephenLee"}); varage=person.get("age");//因为实例化时未指定age值,则为默认值30 varname=person.get("name");//实例化制定了name值,则为"StephenLee"
使用Model属性
你可以在Model中自定义方法来使用Model内的属性。(所有自定义的方法默认为public)
Person=Backbone.Model.extend({ defaults:{ name:"LebronJames", age:30, hobby:"basketball" }, initialize:function(){ alert("WelcometoBackbone!"); }, like:function(hobbyName){ this.set({hobby:hobbyName}); }, }); varperson=newPerson({name:"StephenLee",age:22}); person.like("coding");//设置StephenLee'shobby为coding varhobby=person.get("hobby");//"coding"
监听Model属性的改变
根据Backbone的机制,我们可以给对Model的任意属性进行监听,接下来,我们尝试在initialize()方法中绑定Model一个的属性进行监听,以属性name为例:
Person=Backbone.Model.extend({ defaults:{ name:"LebronJames", age:30, }, initialize:function(){ alert("WelcometoBackbone!"); this.on("change:name",function(model){ varname=model.get("name");//'KobeBryant' alert("Changedmynameto"+name); }); } }); varperson=newPerson(); varage=person.set({name:"KobeBryant"});
通过上述代码,我们知道了如何对Model的某个属性进行监听。假设我们需要对Model所有的属性进行监听,则使用'this.on("change",function(model){});。
服务器与Model的数据交互
前文中已提到Model包含了交互的数据,所以它的作用之一便是承载服务器端传来的数据,并与服务器端进行数据交互。现在我们假设服务器端有一个mysql的表user,该表有三个字段id,name,email。服务器端采用REST风格与前端进行通信,使用URL:/user来进行交互。我们的Model定义为:
varUserModel=Backbone.Model.extend({ urlRoot:'/user', defaults:{ name:'', email:'' } });
创建一个Model
Backbone中每个Model都拥有一个属性id,它与服务器端数据一一对应。如果我们希望在服务器端的mysql表user中新增一条记录,我们只需要实例化一个Model,然后调用save()方法即可。此时Model实例的属性id为空,即说明这个Model是新建的,因此Backbone将会向指定的URL发送一个POST请求。
varUserModel=Backbone.Model.extend({ urlRoot:'/user', defaults:{ name:'', email:'' } }); varuser=newUsermodel(); //注意,我们并没有在此定义id属性 varuserDetails={ name:'StephenLee', email:'stephen.lee@mencoplatform.com' }; //因为model没有id属性,所以此时使用save()方法,Backbone会向服务器端发送一个POST请求,服务器端收到数据后,将其存储,并返回包含id的信息给Model user.save(userDetails,{ success:function(user){ alert(user.toJSON()); } })
此时,在服务器端mysql的user表里多了一条name为StephenLee,email为stephen.lee@mencoplatform.com的记录。
取得一个Model
刚刚我们已经创建了一个Model,并将它存储到了服务器端的数据库中,假设创建Model时,服务器端返回的id属性值为1,此时,我们通过id的值就可以将已存储的数据取回。当我们用id属性值初始化一个Model实例时,通过fetch()操作,Backbone将会向指定的URL发送一个GET请求。
varuser=newUsermodel({id:1});//初始化时指定id的值 //利用fetch()方法将会向user/1请求数据,服务器端将会返回完整的user记录,包含name,email等信息 user.fetch({ success:function(user){ alert(user.toJSON()); } })
更新一个Model
如果我们需要对已经存储的user记录进行修改,利用已知的id值,同样使用save()方法,但因为此时id不为空,Backbone将会向指定的URL发送一个PUT请求。
varuser=newUsermodel({ id:1, name:'StephenLee', email:'stephen.lee@mencoplatform.com' });//实例化时指定id值 //因为指定了id值,此时使用save()方法,Backbone将会向user/1发送PUT请求,将会对数据库中id为1的记录的email修改 user.save({email:'newemail@qq.com'},{ success:function(model){ alert(user.toJSON()); } });
删除一个Model
如果我们需要删除数据库中的记录,利用已知的id值,使用destroy()方法即可。此时,Backbone将会向指定的URL发送一个DELETE操作。
varuser=newUsermodel({ id:1, name:'StephenLee', email:'stephen.lee@mencoplatform.com' });//实例化时指定id值 //因为指定了id值,此时使用destroy()方法,Backbone将会向user/1发送DELETE请求,服务器端接收请求后,将会在数据库中删除id为1的数据 user.destroy({ success:function(){ alert('Destroyed'); } });
什么是Collection
简而言之,Backbone中的Collection就是Model的一个有序集合,比如,它可能会在以下情况中用到:
Model:Student,Collection:ClassStudents Model:TodoItem,Collection:TodoList Model:Animal,Collection:Zoo
Collection一般只使用同一类型的Model,但是Model可以属于不同类型的Collection,比如:
Model:Student,Collection:GymClass Model:Student,Collection:ArtClass Model:Student,Collection:EnglishClass
创建一个Collection
//定义ModelSong varSong=Backbone.Model.extend({ defaults:{ name:"Notspecified", artist:"Notspecified" }, initialize:function(){ console.log("Musicistheanswer"); } }); //定义CollectionAlbum varAlbum=Backbone.Collection.extend({ model:Song//指定Collection内的Model为Song }); varsong1=newSong({name:"HowBizarre",artist:"OMC"}); varsong2=newSong({name:"SexualHealing",artist:"MarvinGaye"}); varsong3=newSong({name:"TalkItOverInBed",artist:"OMC"}); varmyAlbum=newAlbum([song1,song2,song3]); console.log(myAlbum.models);//输出为[song1,song2,song3]