javascript - 如何使用 require.js 删除 Backbone View ？

Question

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

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

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

}
});

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

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

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

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 之前，也不需要全局变量。

只需将当前 View 放入路由器属性即可。

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

---

但即使那样，我也不觉得要求每个 View 都带有异步 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);
        }
    });
})();