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（“创建者id”）

---

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

jQuery的延迟在这里工作得很好。举个粗略的例子：

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

---

注意：默认情况下，主干会在集合和模型的成功/错误函数中返回集合和模型，因此如果需要，请确保手边有一个参考。

您可以使视图足够智能，直到它拥有所需的一切后才进行渲染

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

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

因此，

render

将等待

this.user

和

this.task

完全加载后，再填充正确的HTML；如果在加载其模型之前调用它，则它不会呈现任何内容并返回空占位符。这种方法将视图的所有逻辑巧妙地隐藏在视图中，其中它属于，而且很容易推广

演示：

---

也可以使用下划线（即），而不是检查特定属性：

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

当然，这假设您没有任何默认设置

---

演示：

我在使用两个模型和多个视图的复杂布局中遇到了同样的问题。为此，我没有尝试同步抓取，而是简单地使用一个模型的“成功”函数调用另一个模型的抓取。我的视图只会侦听第二个模型的更改。例如：

var model1 = Backbone.Model.extend({
    ...
});
var model2 = Backbone.Model.extend({
    ...
});

var view1 = Backbone.View.extend({
    ...
});
var view2 = Backbone.View.extend({
    ...
});

model2.on("change",view1.render, view1);
model2.on("change",view2.render, view2);

然后

model1.fetch({
    success : function() {
        model2.fetch();
    }
});

---

关键是你不必做任何复杂的同步。你只需级联抓取并响应上一个模型的抓取。

+1我喜欢你的想法，但事实上问题稍微复杂一点，因为我有更多的视图连接到这种模型..而且这个模型中的一个也有变化..应该怎么做ld I deal？因此，也许有一个两个包装的模型可能是一个更好的解决方案？如果是的话，怎么做？你也可以使用主干网。关系网并始终返回数据服务器端，即：不要依赖客户端应用程序收集所需的信息，而是在服务器上进行整理。Twitter确实做到了这一点。看起来这需要假设在该用户和任务上有将被填充的属性“name”。我们可以不依赖属性name来实现这一点吗？@NagaKiran:您可以使用

isEmpty

，查看我的更新。