0

我正在构建一个backbone.js + require.js 应用程序，我遇到了以下问题。要构建我的应用程序，我有一个App.js文件，其内容如下：

define(function(require) {
    'use strict';

    var _ = require('underscore'),
        Backbone = require('backbone'),
        Router = require('router'),
        ModuleManager= require('moduleManager');

    var App = function App() {
        var base = {
            router: new Router(),
            moduleManager: new ModuleManager(),
            start: function start(){
                Backbone.history.start({pushState: true});
                this.router.navigate('home', {trigger: true}); 
            }   
        };
        return _.extend(
            base, 
            Backbone.events
        );
    };

    return App;

});

应用程序以 开始window.myApp = new App();，然后myApp.start();。

内容router.js如下：

define(function(require) {
    'use strict';

    var _ = require('underscore'),
        Backbone = require('backbone');

    var Router = Backbone.Router.extend({
        routes: {'home': 'home'},
        home: function home() { 
            // MY ISSUE IS HERE
            App.moduleManager.add('moduleName');
        }       
    });

    return Router;
});

这moduleManager是一个效用函数/对象：

  • App.moduleManager.add('module')通过需要 require.js 文件（主干视图 + 集合）添加应用程序模块 ，
  • 做一些检查（例如确保模块不存在），
  • 将模块集中存储在App.moduleManager.modules

除了以下几点之外，一切都运行良好： 我如何App.moduleManager从内部App.router.home或任何其他路线 ( App.router.xyz) 呼叫？

  • 在 内App.router.home，this不能引用App(?)
  • 在 内router.js，我不能打电话App = require('app')，因为我会在和之间建立循环依赖关系App.jsRouter.js

我不确定我是否有全局应用程序结构问题，或者是否只有一个简单的语言结构可以解决这个问题。感谢您的任何帮助，您可以提供。

4

1 回答 1

1

您可以在路由器的构造函数中传递您需要的对象。

但我建议使用事件。在路由中，触发一个事件，然后在应用程序中监听该事件。这让路由器只做一项工作，响应来自浏览器的路由更改（后退/前进点击）。

在路由器中：

home: function() { 
    Backbone.trigger('home:show');
}

在应用程序中：

start: function(){
    Backbone.history.start({pushState: true});
    Backbone.on('home:show', this.showHome, this);
},  

showHome: function(){
    this.router.navigate('home', {trigger: false}); // just update, dont trigger route
    this.moduleManager.add('moduleName');
}

现在，如果您想从代码中更改应用程序显示的内容，您只需触发此事件，而不是调用navigate路由器。

其他一些代码，可能是菜单视图：

homeClicked: function(){
    Backbone.trigger('home:show');
}

这将显示您的主页视图，并更新历史记录。

于 2013-03-20T16:59:03.057 回答