Backbone Marionette - ส่งข้อผิดพลาดเมื่อมีการเรียกใช้การขยายเค้าโครง

ในแอปของฉัน ฉันใช้ Marionette ส่วนขยายของ Backbone ฉันได้รับข้อผิดพลาดแรกเป็น:

Uncaught TypeError: Cannot read property 'extend' of undefined 

และฉันกำลังพยายามต่อท้ายส่วนหัวของฉันและเนื้อหาที่มีส่วนท้ายถึงองค์ประกอบ wrapper... โดยใช้สคริปต์นี้:

แต่ไม่ทำงานเลย...

วิธีที่ถูกต้องในการทำเช่นนี้คืออะไร?

แม่แบบ:

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

สคริปต์:

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

});

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

นี่คือการสาธิตสด

ใครก็ได้ช่วยฉันแสดงองค์ประกอบทั้งหมดของฉันเป็น wrapper ได้โปรด?