[英]Defining a global App Namespace with Require.js and Backbone
I'm new to Require.js, and I'm trying to do something which I thought would be simple but is starting to be a pain. 我是Require.js的新手,我正在尝试做一些我认为很简单的事情但是开始变得很痛苦。
I'm trying to define a global namespace for my Backbone application, and load it as a module. 我正在尝试为我的Backbone应用程序定义一个全局命名空间,并将其作为模块加载。 Here is my namespace (main.js): 这是我的命名空间(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;
});
and here is my config.js file: 这是我的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();
});
}
); );
and for good measure, here is my router: 好的方法,这是我的路由器:
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')
}
});
});
In the past, I was getting a 'app is undefined error'. 在过去,我得到一个'app is undefined error'。 Now, I get a load timeout error after a few minutes that says this: 现在,几分钟后我收到加载超时错误,说明:
Uncaught Error: Load timeout for modules: main
However, the alert doesn't fire, and main.js doesn't seem to get loaded, but I believe router does, and it doesn't bark that TEWC is undefined -- so it may be loading even though it's not in my Network tab? 但是,警报不会触发,并且main.js似乎没有加载,但我相信路由器确实如此,并且它没有吠叫TEWC未定义 - 所以它可能正在加载,即使它不在我的网络标签?
This is probably a rookie question -- does anyone have any insight on this? 这可能是一个新手问题 - 有没有人对此有任何见解?
The following code does not define GlobalRouter yet it get's passed to the define callback 以下代码未定义GlobalRouter,但它已传递给define回调
define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
$(function() {
App.init();
});
}
add GlobalRouter
to define
添加GlobalRouter
来define
Secondly, when it fails to load main
..can you check from console what URL it is trying to access? 其次,当它无法加载main
..你可以从控制台检查它试图访问的URL是什么? It most probably is a mis-configuration. 它很可能是一个错误的配置。
If I'm not mistaken your problem is that in config.js
, after the require.config(), your define() should be a require() instead. 如果我没有弄错你的问题是在config.js
,在require.config()之后,你的define()应该是require()。
Explaining further. 进一步解释。 You currently have: 你目前有:
define([
'jquery',
'underscore',
'backbone',
'main'
...
This define
should be a require
because this is code you want executed; 这个define
应该是一个require
因为这是你想要执行的代码; it is not a module definition. 它不是模块定义。
This and of course the missing GlobalRouter
dependency as noted earlier. 这当然也是前面提到的缺少的GlobalRouter
依赖性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.