Backbone - Throws an error when calling Layout extend

In my application, I am using Marionette

the Backbone

. I am getting as first error like:

Uncaught TypeError: Cannot read property 'extend' of undefined 

      

        
        
        
      

    

And I am trying to add my header and footer content to the wrapper element ... using this script:

But doesn't work at all ...

What would be the correct way to do this?

template:

<div id="wrapper"></div>
<script id="layout-template" type="text/template">   
    <section>     
        <navigation id="menu">ABC</navigation>     
        <article id="content">123</article>   
    </section> 
</script>

      

        
        
        
      

    

script:

AppLayout = Backbone.Marionette.Layout.extend({ 
    template: "#layout-template",
    regions: { 
        menu: "#menu", 
        content: "#content"
    } 

});

var layout = new AppLayout(); 
$('#wrapper').html(layout.render().el);

      

        
        
        
      

    

Here is a Live Demo

Can anyone help me display all my elements in a wrapper?