backbone.js – 一个视图连接到多个模型

我有以下问题？

MyView连接到两个视图：TaskModel和usermodel

TaskModel = {id: 1,taskName: "myTask",creatorName: "myName",creator_id: 2 },usermodel = {id: 2,avatar: "someAvatar"}

视图应该显示

{{taskName}},{{creatorName}},{{someAvatar}}

您可以看到TaskModel和usermodel的抓取应该同步,因为usermodel.fetch需要taskModel.get(“creator_id”)

你建议我使用哪种方式来显示/处理视图和两个模型？

解决方法

您可以使视图足够聪明,无法呈现,直到它具有所需的一切.

假设你有一个用户和一个任务,并将它们传递给视图的构造函数：

initialize: function(user,task) {
    _.bindAll(this,'render');
    this.user = user;
    this.task = task;
    this.user.on('change',this.render);
    this.task.on('change',this.render);
}

现在您有一个参考用户和任务的视图,并且正在监听两者的“更改”事件.然后,渲染方法可以询问模型是否具有应有的一切,例如：

render: function() {
    if(this.user.has('name')
    && this.task.has('name')) {
        this.$el.append(this.template({
            task: this.task.toJSON(),user: this.user.toJSON()
        }));
    }
    return this;​​​​
}

所以渲染将等待,直到this.user和this.task都被完全加载才能填满正确的HTML;如果在加载模型之前调用它,那么它不会显示任何内容并返回一个空的占位符.这种方法使所有的视图的逻辑很好地隐藏在它所属的视图内,并且很容易概括.

演示：http://jsfiddle.net/ambiguous/rreu5jd8/

您也可以使用Underscore的isEmpty(即mixed into Backbone models),而不是检查特定的属性：

render: function() {
    if(!this.user.isEmpty()
    && !this.task.isEmpty()) {
        this.$el.append(this.template({
            task: this.task.toJSON(),user: this.user.toJSON()
        }));
    }
    return this;​​​​
}

那假设你当然没有任何默认值.

演示：http://jsfiddle.net/ambiguous/4q07budc/

原文地址：https://www.jb51.cc/js/151700.html