Issues in loading LayoutManager using requirejs

Question

I'm new to require js and i'm using backbone with layout manager. I've pasted my code below and i'm not able to get the layout manager to work and i get this error :

 "Uncaught TypeError: Cannot call method 'extend' of undefined" 

in line where layoutmanager is used (Backbone.LayoutView.extend)

Main.js

require.config({
paths: {
    jquery: 'lib/jquery-1.9.1.min',
    underscore: 'lib/underscore-min',
    backbone: 'lib/backbone-min',
    handlebars: 'lib/handlebars',
    layoutManager : 'lib/backbone.layoutmanager'
    mousewheel : 'lib/jquery.mousewheel.min'
},
shim : {
    'backbone' : {
        deps: ['jquery', 'underscore' ],
        exports: 'Backbone'
    },
    'layoutManager' : {
        deps: ['jquery', 'underscore', 'backbone'],
        exports: 'LayoutManager'
    },
    'mousewheel' : ['jquery']
}

});

require(["jquery", "underscore", "backbone", "layoutManager", "handlebars","mousewheel", "common"],function($, _, Backbone, LayoutManager, Handlebars,mousewheel, App) {


App.Views.HelloView = Backbone.LayoutView.extend({
    template : '#hello_tmpl1',
});

App.Layouts.AppLayout = new BackBone.Layout({

    template : '#layout',
    views : {
        ".helloView" : new App.Views.HelloView()
    }
});

$('body').empty().append(App.Layouts.AppLayout.el.render());

});  

Common.js
  define(function(){
    var App = null;
    App = { Models:{}, Views:{}, Collections:{}, Templates:{}, Router:{}, Layouts:{}};

   return App;
});

Answer 1

function($, _, Backbone, LayoutManager

Here you name it LayoutManager.

App.Views.HelloView = Backbone.LayoutView.extend({

Here you try to use it as Backbone.LayoutView... which doesn't exist (thus the undefined). Try

App.Views.HelloView = LayoutView.extend({

The Backbone var you have here is different from the global one, think requirejs :)

Answer 2

New version of layoutmanager doesn't use 'LayoutView' to create views. Use Backbone.Layout.extend({ ...}) to create your views ... have fun .. ;)