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

 

欢迎讨论^^

[Backbone.js]如何处理Model里面嵌入的Collection?,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。