Я создаю веб-приложение с requirejs, основой, марионеткой и плагинами, такими как ervolution-slider, waypoints, smothscroll. У меня много проблем с зависимостями нагрузки. Мне нужно обновлять столько раз, чтобы страница загружалась правильно. Я получил ошибки, как, например, при первом загрузке страницы, после того, как многие обновления загрузились моей страницей. Кроме того, после того, как я перехожу к одуму, а затем домой, у меня есть неопределенные ошибки, но с другими представлениями. Фактически, иногда верхний или нижний колонтитулы не могут загружаться.базовый марионетка requirejs childviewcontainer, views is 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. Верхний и нижний колонтитулы - это модули, загруженные в основной файл. Домой и нагрузка через маршрутизаторы.
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: Это представление зависит от thempunch.revolution плагин, который загружается в App.js
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 –