使用 Require.js 和 Backbone 定义全局应用程序命名空间答案

【问题标题】：Defining a global App Namespace with Require.js and Backbone使用 Require.js 和 Backbone 定义全局应用程序命名空间
【发布时间】：2013-03-25 12:03:31
【问题描述】：

我是 Require.js 的新手，我正在尝试做一些我认为很简单但开始很痛苦的事情。

我正在尝试为我的 Backbone 应用程序定义一个全局命名空间，并将其作为模块加载。这是我的命名空间（main.js）：

define(
['jquery',
  'underscore',
  'backbone',
  'GlobalRouter'
],
function($, _, Backbone) {
var App= {
    Models: {},
    Views: {},
    Collections: {},
    Routers: {},
    init: function() {
        new App.Routers.GlobalRouter();
        Backbone.history.start();
    }
}
return App;

});

这是我的 config.js 文件：

require.config({
// your configuration key/values here
baseUrl: "js", // generally the same directory as the script used in a data-main attribute for the top level script
paths: {
    'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
    'underscore': 'vendor/underscore-min',
    'backbone': 'vendor/backbone-min',
    'marionette': 'vendor/backbone.marionette',
    'main' : 'main'
}, // set up custom paths to libraries, or paths to RequireJS plugins
shim: {
    'underscore': {
        exports: '_'
    },

    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },

    'main' : {
        deps: ['underscore', 'jquery', 'backbone', 'GlobalRouter'],
        exports: 'TEWC'
    }

} // used for setting up all Shims (see below for more detail)
});

define([
'jquery',
   'underscore',
  'backbone',
  'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
  $(function() {
       App.init();
    });
 }

);

为了更好的衡量，这是我的路由器：

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

TEWC.Routers.GlobalRouter = Backbone.Router.extend({
    routes: {
        "" : "index",
        "documents/:id" : "edit",
        "login" : "login"
    },

    edit: function(id) {
        alert('edit')
    },

    index: function() {
        alert('index')
    },

    login: function() {
        alert('login')
    }
});

});

过去，我收到“应用程序未定义错误”。现在，几分钟后我收到一个加载超时错误：

Uncaught Error: Load timeout for modules: main

但是，警报没有触发，并且 main.js 似乎没有被加载，但我相信路由器会这样做，并且它并没有吠叫 TEWC 未定义 - 所以它可能正在加载，即使它是不在我的网络标签中？

这可能是一个新手问题——有人对此有任何见解吗？

【问题讨论】：

标签： javascript backbone.js requirejs marionette amd

【解决方案1】：

以下代码没有定义 GlobalRouter 但它被传递给定义回调

define([
'jquery',
   'underscore',
  'backbone',
  'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
  $(function() {
       App.init();
    });
 }

将GlobalRouter 添加到define

其次，当它无法加载main ..你能从控制台检查它试图访问的 URL 吗？很可能是配置错误。

【讨论】：

正是这与 Addy Osmani 的 TodoMVC 与主干和要求 (github.com/addyosmani/todomvc/tree/gh-pages/dependency-examples/…) 相结合，才产生了不同！谢谢！
streetlight：你能说出具体的问题吗？我也有类似的问题。
@JohnEdward，我相信我必须以 AMD 风格配置 main.js，并使用定义函数等。此外，确保您定义的文件的顺序也与函数参数中的事物顺序相匹配非常重要——我相信这是关键。这有帮助吗？

【解决方案2】：

如果我没记错你的问题是在config.js 中，在require.config() 之后，你的define() 应该是一个require()。

进一步解释。您目前拥有：

define([
'jquery',
   'underscore',
  'backbone',
  'main'
...

这个define 应该是require，因为这是您要执行的代码；它不是一个模块定义。

这当然还有前面提到的缺少的GlobalRouter 依赖项。

【讨论】：