骨干-多个事件后呈现视图

Question

I have a Backbone View which I want to render only after two different events have happened. The two events are two different Collections being populated from the server (this is to populate two dropdown select lists).

My two Collections are cFilterFields and cFilterOperators and both have a custom .populate() method which calls .fetch() and fires populated events.

This is what I have:

var MyView = Backbone.View.extend({
    tagName: 'div',
    initialize: function(){
        _.bindAll(this,'render');

        this.fields = new cFilterFields();
        this.operators = new cFilterOperators();

        this.fields.populate();
        this.operators.populate();

        this.listenTo(this.fields,'populated',function(){
            // ...
        });
        this.listenTo(this.operators,'populated',function(){
            // ...
        });

    },
    events: {},
    render: function(){
        // ...
        return this;
    }
});

What is the best way to render this View when both Collection events have fired...?

Answer 1

Have the collections' populate methods return promises and then use jQuery.when

Your initialize should then look something like this

$.when(fields.populate(), operators.populate())
  .done(_.bind(function() {
      this.render();
  }, this));

This solution assumes JQuery and underscore because both are dependencies of Backbone.

Answer 2

Just done it, simple really, you just do:

this.listenTo(this.fields && this.operators,'populated',function(){
    this.render();
});

UPDATE

Don't use this, see comments below, I'll be accepting the correct answer.