バックボーンmarionette requirejs childviewcontainer、views is undefined

Question

私は、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(…) 

私のアプリは基本的に、ヘッダー、フッター、ホームページ、および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

偶然、マリオネットv3のリリース候補を試していますか？私はライブラリのバンドル版がrequirejsのために壊れていると思います。しかし、 '../lib/core/backbone.marionette'という名前の 'marionette'を使うと、backbone.babysitterとbackbone.radioを別々に組み込む必要があります。