backbone.js - 一个 View 连接到多个模型

Question

我有以下问题...
MyView连接到两个 View :TaskModel和 UserModel

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

View 应该显示

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

如您所见，获取 TaskModel和 UserModel应该同步，因为 userModel.fetch taskModel.get("creator_id") 的需求

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

Answer 1

您可以使 View 足够智能，以便在它拥有所需的一切之前不渲染。

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

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

现在您有一个引用用户和任务的 View ，并且正在监听 "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 之前已完全加载；如果在加载模型之前调用它，则它不呈现任何内容并返回一个空占位符。这种方法将所有 View 的逻辑很好地隐藏在它所属的 View 中，并且很容易泛化。

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

您也可以使用下划线的 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/