Backbone.js 主干视图、初始化和渲染

我有一个主干视图，用于加载子视图。加载子视图时，我希望在视图获取所需数据时显示加载程序，并在视图准备渲染时隐藏加载程序

我是这样做的：

var appView = Backbone.View.extend({
    showLoader: function() {
        // Code to show loader
    },

    hideLoader: function() {
        // Code to hide loader
    },

    loadSubView: function() {
        this.showLoader();
        var myView = new MySubView();
        this.$el.html(myView.render().el);
        this.hideLoader();
    }
});

var mySubView = Backbone.View.extend({
    initialize: function() {
        this.myCollection.fetch({
            async: false
        });
    },

    render: function() {
        // Code to render
    }
});

现在，我的子视图加载一个集合，实现方式如下：

var appView = Backbone.View.extend({
    showLoader: function() {
        // Code to show loader
    },

    hideLoader: function() {
        // Code to hide loader
    },

    loadSubView: function() {
        this.showLoader();
        var myView = new MySubView();
        this.$el.html(myView.render().el);
        this.hideLoader();
    }
});

var mySubView = Backbone.View.extend({
    initialize: function() {
        this.myCollection.fetch({
            async: false
        });
    },

    render: function() {
        // Code to render
    }
});

我的子视图同步加载集合，因为这是我发现知道视图何时“准备好”渲染的唯一方法，但我认为这不是使用主干的最佳方法

---

我该怎么办？

有几种方法

您可以显式地使用pubsub模式。大概是这样的：

var AppView = Backbone.View.extend({
    showLoader: function() {
        console.log('show the spinner');
    },

    hideLoader: function() {
        console.log('hide the spinner');
    },

    loadSubView: function() {
        this.showLoader();
        var subView = new SubView();
        subView.on('render', this.hideLoader);
        this.$el.html(subView.render().el);

    }
});

var SubView = Backbone.View.extend({       
    render: function() {
        console.log('a subView render');
        this.trigger('render');
        return this;
    }
});

var appView = new AppView({el: $('body')});
appView.loadSubView();

可以将函数附加到上的/事件 微调器本身：

var AppView = Backbone.View.extend({
    initialize: function() {
        var _this = this;
        this.$('#spinner')
            .hide()
            .ajaxStart(_this.showLoader)
            .ajaxStop(_this.hideLoader);
    }
    ...
}

或者您可以使用：

---

无意冒犯，我认为您应该进一步阅读/学习异步编程。这不是一个主干问题，而是一个你需要掌握的编程概念。我知道同步或异步是什么意思。如果我可以再问一次我的问题：通知父视图fetch已成功的最佳方式是什么？