主干视图、初始化和渲染答案

【问题标题】：Backbone view, initialize and render主干视图、初始化和渲染
【发布时间】：2012-06-15 08:44:53
【问题描述】：

我有一个加载子视图的主干视图。当我加载子视图时，我想在视图获取所需数据时显示加载器，并在视图准备好渲染时隐藏加载器。

我做了这样的事情：

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

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

我该怎么办？

【问题讨论】：

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

标签： backbone.js backbone-views

【解决方案1】：

有几种方法可以做到这一点。

您可以显式使用 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();

http://jsfiddle.net/theotheo/qnVhy/

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

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

或者你可以使用jQuery.ajaxSetup：

 var AppView = Backbone.View.extend({
        initialize: function() {
            var _this = this;
            jQuery.ajaxSetup({
                 beforeSend: _this.showLoader,
                 complete: _this.hideLoader,
                 success: function() {}
            });
        }
    ...
  }

【讨论】：