How to render a view depending on multiple ajax calls in backbone.js?

Question

I have a main view, containing a html form with some empty select tags (-> dropdownlists without elements).
For every select tag I have a sub view in my main view. These sub views are responsible for loading their own data.
Now I want my main view to render everything at once. How can I recognize that all ajax call by my sub views are done?

Here is what I have so far:

BookFormView = Backbone.View.extend({
    render: function () {
        this.el.html($.tmpl('book-form-template', this.model));
        this.authorView = new AuthorView({ el: $('#authors') }); // #authors is a html select element in book-form-template
        this.categoryView = new CategoryView({ el: $('#categories') }); // #categories is a html select element in book-form-template
        this.authorView.el.val(this.model.autherID);
        this.categoryView.el.val(this.model.categoryID);
        return this;
    }
});

You can see the render method of my BookFormView. I want to pre-select the right options by the corresponding model-ids. But that won't work, because of the ajax calls in my sub views.

My sub views:

AuthorView = Backbone.View.extend({
    initialize: function (options) {
        this.render = _.bind(this.render, this);
        this.collection = new Authors(); // Authors is a backbone.js collection
        this.collection.bind('refresh', this.render);
        this.collection.fetch();
    },
    render: function () {
        this.el.html($.tmpl('selectoption-template', this.collection));
    }
});

CategoryView = Backbone.View.extend({
    initialize: function (options) {
        this.render = _.bind(this.render, this);
        this.collection = new Categories(); // Categories is a backbone.js collection
        this.collection.bind('refresh', this.render);
        this.collection.fetch();
    },
    render: function () {
        this.el.html($.tmpl('selectoption-template', this.collection));
    }
});

And finally the controller:

BookController = Backbone.Controller.extend({
    routes: {
        'books': 'list',
        'books/:id/edit': 'showEditForm'
    },
    showEditForm: function (id) {
        var book = new Book({ id: id }); // Book is a backbone.js model
        book.fetch({
            success: function (bookData, resp) {
                var view = new BookFormView({ model: bookData });
                view.render();
            }
        });
    }
    //...
});

I know I can pre-load the categories and authors in my controller but that will not solve my problem because their callbacks are still asynchronious.
Another solution would be to make authors and categories properties of my book model and render them directly without a custom view. But I prefer to have them separated to re-use them at different locations in my app.

Any way to solve this?