Q:

Marionette Layout: $el is not rendered when explicitly defined

In this fiddle I have a dummy code of a issue I'm having with $el in a Backbone.Marionette app.
When I define a Layout, even if $el's length is 1, it is not inserted to the page. But everything works if I let the element with its default config, that is, a div.
Here is the code that declares the Application, defines a main region to it, creates a new layout and item views :
var App = new Backbone.Marionette.Application();

        App.addRegions({
            page: "#page"
        });

        App.PageLayout = Backbone.Marionette.Layout.extend({
            template: "#page-template",
            className: "container",
            regions: {
                header: "#main-header",
                content: "#main-content",
                footer: "#main-footer"
            }
        });

        App.HeaderView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },

            el: "#main-header",
            template: "#header-template",
        });

        App.FooterView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },
            el: "#main-footer",
            template: "#footer-template"
        });

        App.ContentView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },
            el: "#main-content",
            template: "#content-template"
        });

        App.on("initialize:after", function() {
            var pageLayout = new App.PageLayout;

            App.page.show(pageLayout);

            pageLayout.header.show(new App.HeaderView);
            pageLayout.content.show(new App.ContentView);
            pageLayout.footer.show(new App.FooterView);
        });

        App.start();

The templates:
<script id="header-template" type="text/template">
        Awesome Inc.
    </script>
    <script id="footer-template" type="text/template">
        <li> <a href="#">Like us on Facebook</a> </li>
        <li> <a href="#">Tweet us</a> </li>
        <li> <a href="#">Hate us on Hatey.com</a> </li>
    </script>
    <script id="page-template" type="text/template">
        <header id="main-header"></header>
        <section id="main-content"></section>
        <footer id="main-footer"></footer>
    </script>
    <script id="footer-template" type="text/template">
        <li> <a href="#">Like</a> </li>
        <li> <a href="#">Tweet us</a> </li>
        <li> <a href="#">Hate</a> </li>
    </script>
    <script id="content-template" type="text/template">
        <h1>Welcome to this World</h1>
    </script>

And finally, the main element, in the page:
<main id="page">Loading...</main>

I need the layout to find the region that was rendered (since the App instance has handled that already) and append the related ItemView content to it.
I wonder if I'm missing something really obvious.
Any help would be great!
EDIT
After some pointers by @DavidSulc, I have figured out that I'm unable to do this the way I need. 
That means I can't create some regions in the layout, attach some item views, making the item views' el the same as the regions defined on the layout. So I will learn to like the extra div created inside the region. In my opinion, this just causes extra and undesired markup - Why can't I use the region's element as long as it is rendered already?
If there is another way to do this, I would appreciate any ideas.

A:

Here's a working fork: http://jsfiddle.net/hR4Sx/1
A few pointers:

you shouldn't define el attributes in your views
your regions need to be present on the page
the best way to manage layouts is to render their subviews when the layout itself is shown

Shameless plug: my Marionette book covers this type of info (and more!), or you can take a look at the code here if you'd rather learn on your own...

