Question

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

我做了类似的事情：

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的最佳方式。

我应该做什么？

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

骨干视图，初始化和渲染

1 个答案: