我正在使用 requirejs、backbone、marionette 和 ervolution-slider、waypoints、smothscroll 等插件构建一个 Web 应用程序。我在负载依赖方面遇到了很多问题。我需要刷新很多次才能正确加载页面。我第一次加载页面时遇到如下错误，多次刷新后我的页面加载成功。此外，在我去 aboutus 然后回家后，我得到了未定义的错误，但有其他观点。事实上，有时页眉或页脚无法加载。
require.js:900 TypeError: Cannot read property 'ChildViewContainer' of undefined(…)Module.check @ require.js:900
require.js:900 TypeError: Cannot read property 'Application' of undefined(…)Module.check @ require.js:900
require.js:900 ReferenceError: Backbone is not defined(…)Module.check @ require.js:900
require.js:900 TypeError: Cannot read property 'LayoutView' of undefined(…)Module.check @ require.js:900
require.js:900 TypeError: Cannot set property 'About' of undefined(…)Module.check @ require.js:900
require.js:900 TypeError: Cannot read property 'ItemView' of undefined(…)
基本上，我的应用程序有页眉、页脚、主页和关于我们的页面。页眉和页脚是加载在主文件中的模块。Home 和 aboutus 通过路由器加载。
main.js
require.config({
map: {
'*': {
'css': 'plugins/require-css/css'
}
},
paths: {
'plugins': '../plugins',
'jquery': '../lib/jquery-2.1.4',
'jquery.browser': '../plugins/jquery.browser',
'jquery.video': '../plugins/vide/jquery.vide.min',
'waypoints': '../plugins/waypoints/jquery.waypoints.min',
'backbone': '../lib/backbone',
'marionette': '../lib/backbone.marionette',
'backbone.subroute': '../lib/backbone.subroute',
'text': '../lib/text',
'tpl': '../lib/tpl',
'underscore': '../lib/underscore',
'bootstrap': '../lib/bootstrap',
'modernizr': '../lib/modernizr-2.8.3',
'themepunch.tools': '../plugins/rs-plugin/js/jquery.themepunch.tools.min',
'themepunch.rev': '../plugins/rs-plugin/js/jquery.themepunch.revolution',
'smoothscroll': '../plugins/SmoothScroll',
//our modules
'core':'core',
'header': 'modules/header',
'footer': 'modules/footer',
'home': 'modules/home',
'aboutus': 'modules/aboutus',
},
shim: {
'marionette': {
deps: ['backbone'],
exports: 'Marionette'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery'],
},
'tpl': {
deps: ['text']
},
'smoothscroll': {
deps: ['jquery.browser']
},
'themepunch.tools': {
deps: ['jquery']
},
'themepunch.rev': {
deps: ['themepunch.tools']
},
'jquery.browser': {
deps: ['jquery']
},
'waypoints': {
deps: ['jquery']
},
'jquery.video': {
deps: ['jquery']
}
}
});
require([
"app", "routes/application.router",
"header/header.module",
"footer/footer.module",
"home/home.module",
"aboutus/aboutus.module",
"bootstrap"],
function (GB, AppRouter) {
GB.routers = new AppRouter();
GB.start();
});
应用程序.js：
define([
"marionette",
"core/GB.ini",
"modernizr",
"themepunch.rev",
"smoothscroll",
"jquery.video"
],
function (Marionette, AppIni) {
var GB = new Marionette.Application();
GB.navigate = function (route, options) {
options || (options = {});
GB.routers.navigate(route, options);
};
GB.getCurrentRoute = function () {
return Backbone.history.fragment
};
GB.on("before:start", function () {
var RegionContainer = Marionette.LayoutView.extend({
el: "#app-container",
regions: {
header: "#header-wrapper",
main: "#main-region",
footer: "#footer-region",
dialog: "#dialog-region"
}
});
GB.regions = new RegionContainer();
});
GB.on("start", function () {
AppIni.start();
Backbone.history.start();
if (GB.getCurrentRoute() === "")
GB.navigate("home", { trigger: true });
});
return GB;
});
router.js：如果你能看到我在调用路由器时评论了模块的使用，因为我无法使用 requirejs 加载模块。所以，我只是直接调用每个模块中定义的控制器。
define(["app",
"backbone"],
function (GB) {
var router = Backbone.Router.extend({
routes: {
"home": "initializeHome",
"aboutus": "initializeAbout",
"services-container": "initializeServices",
"signup": "initializeSignup"
},
initializeHome: function () {
GB.Home.Controllers.Overview.show();
//require(["home/home.module"], function () {
// GB.routers.Home = new HomeRouter();
//});
},
initializeAbout: function () {
GB.About.Controllers.Overview.show();
//require(["aboutus/aboutus.module"], function () {
// GB.routers.About = new AboutRouter("aboutus", this.options);
//});
},
initializeServices: function () {
console.log("services");
//require(["home/home.module"], function () {
// GB.routers.Home = new HomeRouter();
//});
},
initializeSignup: function () {
console.log("signup");
GB.Signup.Controllers.Overview.show();
}
});
return router;
});
home.module.js
define(["app", "home/home.controller"], function (GB, controller) {
var module = {};
module.Controllers = {
Overview: controller
}
GB.Home = module;
return GB.Home;
});
home.controller.js
define(["app", "modules/home/overview"], function (GB, HomeLayout) {
return {
show: function () {
var layout = new HomeLayout();
GB.regions.main.show(layout);
}
}
});
主页.overview.js
define([
"marionette",
"text!modules/home/home.html",
"modules/home/slider/slider.view",
"modules/home/services/services.view",
],
function (Marionette, Template, SliderView, ServicesView) {
var view = Marionette.LayoutView.extend({
tagName: 'div',
template: Template,
regions: {
slider: "#banner",
services: "#services-container"
},
onRender: function () {
var sliderView = new SliderView();
this.slider.show(sliderView);
var servicesView = new ServicesView();
this.services.show(servicesView);
}
});
return view;
});
slider.view.js：这个视图依赖于 App.js 中加载的 mpunch.revolution 插件
define(["marionette", "text!modules/home/slider/slider.html"],
function (Marionette, SliderTemplate) {
var view = Marionette.ItemView.extend({
className: "slideshow",
tagName: "div",
template: SliderTemplate,
onRender: function () {
if (this.$el.length > 0) {
this.$(".tp-bannertimer").show();
this.initSlider();
}
},
initSlider: function () {
this.$(".slider-banner-fullwidth-big-height").show().revolution({
...
});
};
return view;
});
我会很感激任何帮助，因为我很久以前就一直在处理这个问题。谢谢