【发布时间】：2014-10-31 20:00:31
【问题描述】：
使用 Marionette/Backbone 并在传递 App 对象以触发自定义事件时遇到问题。
具体来说，requirejs 会抛出以下内容：“错误：尚未为上下文加载模块名称“app”：_”。
编辑： 有问题的代码是“var App = require('app');”在 appController.js 中。
根据我的阅读，该消息指的是循环引用或尚未加载的脚本。我应该如何构建我的代码以避免这种情况？
注 1： 目前，我没有使用 r.js。我确实有一个繁琐的构建过程，但还没有机会设置 r.js。仅在可以缓解我的问题的情况下提及它。
注意 2： 我没有使用 Marionette 的 stock 模块，因为我想学习 requirejs。
提前致谢。
//config.js
require.config({
paths: {
jquery: '../jquery',
bootstrap: '../bootstrap',
underscore: '../lodash',
backbone: '../backbone',
'backbone.babysitter': '../backbone.babysitter',
'backbone.wreqr': '../backbone.wreqr',
marionette: '../backbone.marionette',
text: '../text'
},
enforceDefine: true,
shim: {
'bootstrap': {
deps: ['jquery'],
exports: '$'
},
}
});
define(
['app', 'jquery', 'underscore', 'backbone', 'marionette', 'bootstrap'],
function(App, $, _, Backbone, Marionette) {
App.start();
}
);
//app.js
define(function(require) {
var Marionette = require('marionette'),
// and AppRouter, AppController
var app = new Marionette.Application();
app.addInitializer(function() {
var router = new AppRouter({
controller: AppController
});
});
app.on('start', function() {
Backbone.history.start();
});
app.vent.on('custom:event', function(a) {
console.log('caught custom:event, received: ' + a);
});
return app;
});
// appRouter.js
define(function(require) {
var Marionette = require('marionette');
return Marionette.AppRouter.extend({
appRouter: {
'': 'main'
}
});
});
//appController.js
define(function(require) {
return {
main: function() {
var App = require('app');
App.vent.trigger('custom:event', ['test']);
}
}
});
更新：
当然，在发布这个问题之后，我找到了一个可能的解决方案。如果我将 appController.js 调整为以下内容，它可以正常工作。尽管如此，该解决方案仍然感觉不对。我是否必须为每条路线复制它？
//appController.js (version 2)
define(function(require) {
return {
main: function() {
require(['app'], function(app) {
app.vent.trigger('custom:event', ['test']);
});
}
}
});
更新 2
如果有人好奇，这就是我使用 Backbone.Wreqr 的方式（谢谢@arisalexis）。仅显示从上面的代码更改的文件。
//app.js
define(function(require) {
var Marionette = require('marionette'),
Wreqr = require('backbone.wreqr'),
// and AppRouter, AppController
var app = new Marionette.Application();
app.addInitializer(function() {
var router = new AppRouter({
controller: AppController
});
});
app.on('start', function() {
Backbone.history.start();
});
// Get hook to global channel and listen for events!
var channel = Wreqr.radio.channel('global');
channel.vent.on('custom:event', function(a) {
console.log('caught custom:event, received: ' + a);
});
return app;
});
//appController.js
define(function(require) {
var Wreqr = require('backbone.wreqr');
var channel = Wreqr.radio.channel('global');
return {
main: function() {
channel.vent.trigger('custom:event', 'test');
}
}
});
注意，一般来说，路由器的控制器中不应该有任何逻辑。此问题中提供的代码是概念证明。
【问题讨论】：
-
你能发布
paths的 requirejs 配置吗？我猜你还没有在那里声明app。 -
添加了路径和垫片的实际内容（注意，我发现骨干或木偶不需要垫片）。正如你所说，我在“路径”中没有应用程序。我认为 requirejs 知道在 baseUrl 中查找它吗？事实上，它正在被加载。如果我注释掉“var App = require('app');”在 appController.js 中，应用程序按预期加载。
-
您需要将
app的路径添加到paths。然后你可以使用第一个版本。事实上，在评论var App = require('app');后并没有破坏你的代码，这意味着它被加载到其他地方并在全球范围内声明。 -
已将
app的路径添加到paths，但不幸的是，仍然收到相同的消息。注意，检查了 Firebug，并且正在加载 app.js（例如，不是 404'ing、500'ing 等）。 -
你能在几个地方添加
debugger来检查文件的加载顺序吗？
标签： javascript backbone.js requirejs marionette