0
我正在構建一個帶有requirejs，骨幹，牽線木偶和插件的Web應用程序，例如ervolution-slider，waypoints，smothscroll。我在加載依賴方面遇到很多問題。我需要刷新很多次，才能正確加載頁面。第一次加載頁面時，我收到了很多錯誤，比如多次刷新頁面加載成功後。另外，在我去了aboutus然後回家後，我得到了未定義的錯誤，但有其他觀點。實際上，有時頁眉或頁腳無法加載。骨幹牽線木偶requirejs childviewcontainer，視圖是undefined
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(…)
基本上，我的應用程序有一個頁眉，頁腳，主頁和aboutus頁面。頁眉和頁腳是在主文件中加載的模塊。 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();
});
app.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);
}
}
});
home.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加載thempunch.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;
});
我很感激任何幫助，因爲我從很久以前就開始處理這個問題。謝謝
這裏代碼太多了。把問題分成幾個小問題。但首先，我會說你誤解了墊片的使用。如果庫不支持AMD，應該使用它。骨幹和木偶無需墊片。你如何知道它？嘗試在需要的庫中找到'defne.amd'。 –
你可以請發佈service.view和slider.view –