[Backbone.js]如何处理Model里面嵌入的Collection?

浏览数：24 / 时间：2015年06月09日

写了近半个月的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

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

标签： c t color http it java html a class 代码 l c t color http it java html a class 代码 l

相关文章

随机文章

您可能还喜欢

您可能还喜欢