[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});

欢迎讨论^^