Static Site to Ember rc1 Step 3

Extracting the "nav" HTML into it's own template, and using the "render" helper to add it to the page

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<!-- all we've done here is wrap the whole page in a handlebars script tag named "application" -->
<script type="text/x-handlebars" data-template-name="application">
    <header>
        
        <h1>Our New Shop</h1><!-- this text would be static, so we can leave it -->
        {{render nav}}<!-- this one helper will insert a view/template named nav (if it exists) -->
    </header>
    
    <section id="page_body">    
        <section id="cart"><!-- The cart will be it's own view -->
            <h1>Cart</h1>
            <ul>
                <li>Item 1</li><!-- Cart items will absolutely need to be dynamic -->
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </section>
        <div id="page_content"><!-- Page content will also need to be dynamic -->
            <h1 id="page_title">Home Page</h1>
            <article id="content">This is the home page</article>
        </div>
        
    </section>
    <footer>
        Copywrong blah blah blah<!-- We'll seporate the footer too -->
    </footer>
</script>
 
<script type="text/x-handlebars" data-template-name="nav">
        <nav><!-- All we've done here is move the nav items into a handlebars template and call it using the "render" helper -->
            <ul>
                <li id="home">Home</li>
                <li id="monitors">Monitors</li>
                <li id="ram">RAM</li>
                <li id="hdd">HDD</li>
            </ul>
        </nav>
</script>

CSS

* :not(article) :not(ul) :not(header) :not(nav){
    border-radius:4px;
    background-color: rgba(237, 237, 237, .35);
    border:solid 1px gray;
}
html, body {
    height:100%;
}
header h1 {
    font-weight:bold;
    font-size:3em;
    text-align:center;
}
nav ul {
    list-style-type:none;
}

nav ul li {
    list-style-type:none;
    display:inline-block;
    height: 25px;
    line-height:25px;
    border-right: solid 1px black;
    padding-left: 5px;
    padding-right:5px;
    text-align:center;
    width: 75px;
}
#page_body {
    position:relative;
    padding:2px;
    margin-bottom:25px;
    border:solid 1px black;
    width: 500px;
    min-height:100%;
    margin-left:auto;
    margin-right:auto;
}
#page_body:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#page_title {
    text-align:center;
    text-decoration:underline;
    font-weight:bold;
    font-size:2em;
}
#cart {
    float:right;
    clear:right;
    border:solid 1px black;
    width: 98px;
    min-height: 100px;
}
#page_content {
    float:left;
    clear:left;
    width: 398px;
}
footer {
    clear: both;
    border:solid 1px black;
    width: 100%;
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    line-height:25px;
    background-color:gray;
}

JavaScript

//We'll keep the data, and start the ember app below it
//We'll also wrap the jQuery listeners in a function that we can call when Ember is ready

// We have an object of "page" data as might be returned from the server
var page_data = {
    home:{
        title:"Home Page",
        content:"This is the Home Page."
    },
    monitors:{
        title:"Monitors",
        content:"We could list monitors here."
    },
    ram:{
        title:"RAM",
        content:"RAM!"
    },
    hdd:{
        title:"Hard Drives",
        content:"High Density Content."
    }
};

//the basic creation of the app
window.OurShop = Em.Application.create();
OurShop.ApplicationController = Em.Controller.extend();

//This view will look for the template "application" by default 
//if we wanted to use another name we could just pass it to in the extend function:
//.extend({ templateName:"someApp"})
OurShop.ApplicationView = Em.View.extend({
    didInsertElement:function(){
        add_listeners();
    }
});

//We've wrapped the jQuery listeners in a function so that they can be 
// instatiated after Ember renders the template
function add_listeners(){
    // For each nav button we set an on click to set the title and content of the page 
    $('#home').click(function(){
        $("#page_title").html(page_data.home.title);
        $("#content").html(page_data.home.content);
    });
    $('#monitors').click(function(){
        $("#page_title").html(page_data.monitors.title);
        $("#content").html(page_data.monitors.content);
    })
    $('#ram').click(function(){
        $("#page_title").html(page_data.ram.title);
        $("#content").html(page_data.ram.content);
    })
    
    $('#hdd').click(function(){
        $("#page_title").html(page_data.hdd.title);
        $("#content").html(page_data.hdd.content);
    })
}