View is not showing in backbone.marionette - backbone.js

Question

I was trying to build an example to demonstrate the region and layout thing of Backbone.Marionette . But i stuck in the layout , though i am calling the layout.region.show() , it's not showing anywhere in the DOM.
Full example can be found in this JsFiddle.
This is the layout part :
AppLayout = Backbone.Marionette.Layout.extend({
template: "#layout-template",
el : "layout-containr",
regions: {
menu: "#menu",
content: "#content"
}
});
Layout template:
<script id="layout-template" type="text/template">
<section>
<div id="menu"></div>
<div id="content"></div>
</section>
Here is how i am showing the layout :
var layout = new AppLayout();
layout.render();
layout.menu.show(gridView);
GridView's definition can be found here:
var GridView = Backbone.Marionette.CollectionView.extend({
itemView: GridRow,
el:'#menu'
});
Full example can be found in this JsFiddle.
And i have a complimentary question :
How layout will know where it should be attached ???
I did not find it anywhere in the net which makes me sure that i am missing some concepts here.

Answer 1

You need a bigger region to show the layout, in application level.
Usually when you initialize a Marionette application, you will have some top-leve regions to show the layout you want to render later.
App.addInitializer =>
App.addRegions
menuRegion: '#header'
contentRegion: '#stage' # These DOM come from your application layout
And then in your controller, you show these layout in your top-leve region.
indexShow: ->
layout = new App.Layouts.SomeLayout()
App.contentRegion.show(layout)
someView = new App.Views.SomeView()
anotherView = new App.Views.AnotherView()
layout.someSubRegion.show(someView)
layout.anotherSubRegion.show(anotherView)
And, you usually don't need an el either in your view or layout