One View connected to multiple models

Question

I have the following problem…

MyView which is connected to two views: TaskModel and UserModel

TaskModel = {id: 1,          


        

Answer 1

You could make the view smart enough to not render until it has everything it needs.

Suppose you have a user and a task and you pass them both to the view's constructor:

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

Now you have a view that has references to both the user and the task and is listening for "change" events on both. Then, the render method can ask the models if they have everything they're supposed to have, for example:

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

So render will wait until both the this.user and this.task are fully loaded before it fills in the proper HTML; if it is called before its models have been loaded, then it renders nothing and returns an empty placeholder. This approach keeps all of the view's logic nicely hidden away inside the view where it belongs and it easily generalizes.

Demo: http://jsfiddle.net/ambiguous/rreu5jd8/

---

You could also use Underscore's isEmpty (which is mixed into Backbone models) instead of checking a specific property:

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

That assumes that you don't have any defaults of course.

Demo: http://jsfiddle.net/ambiguous/4q07budc/