如何使用 require.js 删除 Backbone 视图？

Question

我有一个使用 require.js 的主干应用程序。

在使用 require 我的 Backbone 路由器之前看起来像这样。

APP.views = {};

APP.Router = Backbone.Router.extend({

routes: {

    '(/)' : 'index',
    'about(/)' : 'about'

},

initialize : function(){
    Backbone.history.start({ pushState: true });
},

index: function() {
    this.showView( new APP.Views.IndexView() );
},

about: function() {
    this.showView( new APP.Views.AboutView() );
},

showView : function( view ) {

        if ( APP.views.current ) {
            APP.views.current.remove();
        }
        APP.views.current = view;
        $( '#page' ).html( view.render().$el );

}
});

我会将“当前”视图存储在全局变量中，并在每次更改路线并且生活良好时终止现有视图。

但是，我如何使用 require.js 来实现这一点？

我的 requirejs 路由器当前如下所示，但我不确定如何删除现有视图。虽然，我没有注意到任何典型的“僵尸视图”症状，但我觉得我应该删除现有视图。

define( function( require ){

    // DEPS
    var $           = require('jquery'),
        _           = require('underscore'),
        Backbone    = require('backbone');

    // ROUTER
    var Router = Backbone.Router.extend({

        routes: {

            '(/)' : 'index',
            'about(/)' : 'about'

        },
        initialize : function(){

            Backbone.history.start({ pushState: true });

        },
        index: function(){

            this.showPage('index');

        },
        about: function() {

            this.showPage('about');

        },
        showPage : function( pageName ) {

            var view = 'views/pages/' + pageName;

            require( [ view ] , function( Page ) {

                var page = new Page();

                $('#page').html( page.render().el );

            });

        }

    });

    return Router ;

});

Answer 1

即使在使用 require.js 之前，也不需要全局变量。

只需将当前视图放入路由器属性中即可。

initialize : function() {
    this.$page = $('#page');
    Backbone.history.start({ pushState: true });
},
showView : function(view) {
    if (this.current) this.current.remove();
    this.$page.html((this.current = view).render().el);
}

然后，同样的事情也适用于您的异步需求案例：

showPage : function(pageName) {
    if (this.current) this.current.remove();

    var view = 'views/pages/' + pageName,
        self = this;
    require([view], function(Page) {
        self.$page.html((self.current = new Page()).render().el);
    });
}

---

但即便如此，我也不觉得要求每个视图都带有异步 require 是值得的。您只是通过大量额外请求减慢了您的应用程序。

只需定义每个模块的依赖关系。

define([
    'jquery',
    'backbone',
    'views/index', 
    'views/about'
], function($, Backbone, IndexView, AboutView){
    // ...
});

在开发过程中，每次刷新时都会看到大量请求，但当准备好投入生产时，请使用 require optimizer 构建所有 js 文件的缩小包。

---

还请注意，您可以拥有全局模块范围，它们只是在模块范围的根（IIFE 或使用 require.js）声明的局部变量。

(function() {
    var currentView;

    var Router = Backbone.Router.extend({
        // ...snip...
        showView: function(view) {
            if (currentView) currentView.remove();
            this.$page.html((currentView = view).render().el);
        }
    });
})();