Question

我正在建立一个带有requirejs，骨干网，牵线木偶和插件的网络应用程序，如ervolution-slider，waypoints，smothscroll。我在加载依赖性方面遇到很多问题。我需要刷新这么多次才能正确加载页面。我第一次加载页面时遇到错误，经过多次刷新后我的页面加载成功。此外，在我去约束然后回家后，我得到了未定义的错误，但有其他观点。实际上，有时页眉或页脚无法加载。

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;
});

我很感激任何帮助，因为我很久以前就已经解决了这个问题。感谢

Answer 1

你偶然尝试过Marionette v3发布候选人吗？我相信库的捆绑版本已经破坏了requirejs。但你可以使用＆＃39; marionette＆＃39; .. / lib / core / backbone.marionette＆＃39;，然后你还需要分别包括backbone.babysitter和backbone.radio

backbone marionette requirejs childviewcontainer，views is undefined

1 个答案: