一个视图连接到多个模型

Question

我有以下问题......

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")

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

Answer 1

您可以使视图足够智能,直到它具有所需的一切为止.

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

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

现在,您有一个视图,它既引用了用户又引用了任务,并且正在侦听"change"两者上的事件.然后,该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;????
}

因此,在填充正确的HTML之前,render它将等待this.user并且this.task完全加载; 如果在加载模型之前调用它,则它不呈现任何内容并返回空占位符.这种方法将所有视图的逻辑很好地隐藏在它所属的视图中,并且很容易概括.

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

您也可以使用Underscore isEmpty(混合到Backbone模型中)而不是检查特定属性:

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/

Answer 2

jQuery的Deferred在这里工作得很好.作为一个粗略的例子:

var succesFunction = function () {
    console.log('success');
};
var errorFunction = function () {
    console.log('error');
};

$.when(taskModel.fetch(), userModel.fetch()).then(successFunction, errorFunction);

你也可以通过管道使用的原油数据的请求(记住fetch,save,create其实只是围绕jQuery的包装器$.ajax对象.

var taskModelDeferred = taskModel.fetch();
var userModelDeferred = taskModelDeferred.pipe(function( data ) {
    return userModel.fetch({ data: { user: data.userId }});
});

注意: Backbone在集合和模型上默认返回成功/错误函数中的集合和模型,因此如果您需要,请务必提供参考.