Как отобразить представление в зависимости от нескольких вызовов ajax в backbone.js?

Question

У меня есть основной вид, содержащий HTML-форму с некоторыми пустыми тегами выбора (-> выпадающие списки без элементов).
Для каждого тега select у меня есть основной вид в главном окне. Эти вложенные представления отвечают за загрузку своих собственных данных.
Теперь я хочу, чтобы мой основной вид отображал все сразу. Как я могу распознать, что все вызовы ajax по моим под-представлениям выполнены?

Вот что у меня есть:

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

Вы можете увидеть метод рендеринга моего BookFormView. Я хочу предварительно выбрать правильные варианты по соответствующим идентификаторам моделей. Но это не сработает из-за вызовов ajax в моих под-представлениях.

Мои подвиды:

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

И, наконец, контроллер:

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();
            }
        });
    }
    //...
});

Я знаю, что могу предварительно загрузить категории и авторов в свой контроллер, но это не решит мою проблему, потому что их обратные вызовы все еще асинхронны.
Другим решением было бы создать авторам и категориям свойства моей книжной модели и отобразить их напрямую без пользовательского представления. Но я предпочитаю разделять их для повторного использования в разных местах моего приложения.

Есть ли способ решить эту проблему?

Answer 1

Я разобрался, это совсем не о backbone.js. Это просто обработка функций в JavaScript. Я нашел отличный ответ здесь на stackoverflow, который отлично работает для меня.