脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-[Backbone.js]如何处理Model里面嵌入的Collection?，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 写了近半个月的backbone.js代码，从一开始的todo到现在做仿微信的网页聊天，其中最大的困惑就在于如何处理比较复杂的Model，其内嵌了一个或者多个Collections。
假设我们有一个PErson的Model，一个Person会有多个工作，那么我们将jobs这个属性设置为一个Collection:
初始化代码如下：
复制代码
VAR Job = Backbone.Model.extend({
});
var Jobs = Backbone.Collection.extend({
model:Job,
});
var Person = Backbone.Model.extend({
});
复制代码
下一步，给Person设置jobs的属性：
var Person = Backbone.Model.extend({
inITialize:function(options){
this.set('jobs',options.jobs);
}
});
然后创建jobs的collection以及person object,将jobs赋值给person.jobs属性：
var jobs = new Jobs([{name:'PHP工程师'},{name:'设计师'},{name:'测试人员'}]);
var jimmy = new Person({jobs:jobs});
通过chrome的console看到值：
我们添加一些view，因为在backbone.js里view才是MVC里的Controller:
复制代码
var PersonView = Backbone.View.extend({
tagName:'ul',
initialize:function(){
this.render();
this.model.get('jobs').on('add',this.addFirst,this);
},
adDFirst:function(job){
var jobView = new JobView({model:job});
this.$el.PRepend(jobView.render().el);
},
renderOne:function(job){
var jobView = new JobView({model:job});
this.$el.append(jobView.render().el);
},
render:function(){
var jobs = this.model.get('jobs');
jobs.each(function(job){
this.renderOne(job);
},this);
$(document.body).append(this.el);
}
});
var JobView = Backbone.View.extend({
tagName:'li',
template:'<%=name%>',
initialize:function(){
this.model.on('change',this.render,this);
},
render:function(){
var template = _.template(this.template,this.model.toJSON());
this.$el.htML(template);
return this;
},
});
复制代码
这里要为Job单独设置一个view是因为一个model对应一个view的'BB原则'，方便在model改变的时候，view改变。
最后new PersonView:
var jimmyView = new PersonView({model:jimmy});
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-[Backbone.js]如何处理Model里面嵌入的Collection?全部内容，希望文章能够帮你解决javascript代码实例教程-[Backbone.js]如何处理Model里面嵌入的Collection?所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。