RequireJs：错误的模块顺序

Question

我得到了以下 router.js：

define(['jquery', 'underscore', 'backbone', 'views/settings/index'], function($, _, Backbone, SettingsView) {

    var Router = Backbone.Router.extend({

        container: $('div.main'),

        routes: {
                "settings": "settings"
                , "settings/:query": "settings"
        },

        settings: function(query) {
            this.container.html(SettingsView.render().el);
        }

    });

    if (Router._instance) return Router._instance;

    Router._instance = new Router();

    return Router._instance;

});

路由器在 main.js 文件中被调用，该文件在 requirejs 配置中被标记为第一个依赖项：

define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, router) {

    // ajax settings (sent cors cookies)
    $.ajaxSetup({ xhrFields: { withCredentials: true } });

    // register master router
    window.router = router;

    // start backbone history
    Backbone.history.start({ root: "/" });          

});

在某些方面我现在想做：

define(['jquery', 'underscore', 'backbone', 'router'], function($, _, Backbone, router) {

    var View = Backbone.View.extend({

        initialize: function() {
            router.on('route:settings', this.change, this);
        },

        change: function(query) {
            // load some new content for example
        }

    });

    return View;

});

比我收到此错误消息：

Uncaught TypeError: Cannot call method 'on' of undefined 

更新： 我为每个模块添加了一个 console.log。所以我知道模块的执行顺序。我提到requirejs的顺序不对：

view.js -> main.js -> router.js

代替：

router.js -> main.js -> view.js

让我们看看如何解决这个问题

更新 2： 我现在将路由器事件绑定部分包装到一个 setTimeout 循环中：

        setTimeout(function() {
            window.router.on('route:settings', this.select, this);        
        }.bind(this), 20);

看看它的工作原理！

这确实只是一个修复，但仍然是一个修复:)

Answer 1

你为什么要在你的路由器上创建一个单例实例？

据我所知，Requirejs 只解析每个模块一次 就我对任何体面的模块加载器的期望而言。

#router.js
define(['jquery', 'underscore', 'backbone', 'views/settings/index'], 
  function($, _, Backbone, SettingsView) {
  //your code omitted ...

  //no need to do this
  //if (Router._instance) return Router._instance;
  //Router._instance = new Router();
  //return Router._instance;

  //this should work as well and give you a "singleton" instance
  return new Router();

});

Answer 2

1. 请检查您提供给 requirejs.config() 的名称/路径是否正确。我已经撞了几次墙，因为我有一个轻微的错字。 requirejs 在这种情况下不会返回任何错误，但遗憾的是只是未定义。
2. 如果您确定没有错字，我会尝试将 main.js 包含为对视图定义的显式依赖。

Answer 3

我认为您需要在第一个 define 的末尾返回对 Router 对象的引用。

define(['jquery', 'underscore', 'backbone', 'views/settings/index'], function($, _, Backbone, SettingsView) {

    var Router = Backbone.Router.extend({

        container: $('div.main'),

        routes: {
            "settings": "settings"
            , "settings/:query": "settings"
        },

        settings: function(query) {
            this.container.html(SettingsView.render().el);
        }

    });

    var Singletonizer = function(Singleton) {
        if (Singleton._instance) return Singleton._instance;

        Singleton._instance = new Singleton();

        Singletonizer(Singleton);
    };

    return Singletonizer(Router);
});