Question

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

使用前要求我的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 );

}
});

我会藏匿当前的＆＃39;查看全局变量，并在每次路径更改且生命良好时终止现有视图。

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

我的requirejs路由器目前看起来如下，但我不确定如何删除现有的视图。虽然，我没有注意到任何典型的＆＃34;僵尸视图＆＃34;症状我觉得我应该删除现有的观点。

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

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

1 个答案: