Static Site to Ember rc1 Step 6

Remove the jQuery listeners, add links to the nav, and a route/resource and template for "monitors"

by amindunited

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>
<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">
        <!-- Add The cart -->
        {{render cart}}<!-- this one helper will insert a view/template named "cart" (if it exists) -->
        {{outlet page}}
    </section>
    {{render footer}}<!-- this one helper will insert a view/template named "footer" (if it exists) -->
</script>
 
<script type="text/x-handlebars" data-template-name="nav">
        <nav>
            <ul>
                <!-- Since we are going to remove the listeners we'll a links to the nav items --> 
                <li id="home"><a href="#">Home</a></li>
                <li id="monitors"><a href="#/monitors">Monitors</a></li>
                <li id="ram"><a href="#/ram">RAM</a></li>
                <li id="hdd"><a href="#/hdd">HDD</a></li>
            </ul>
        </nav>
</script>

<!-- Move the cart contents into a handlebars template -->
<script type="text/x-handlebars" data-template-name="cart">
    <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>
</script>

<!-- Move the footer contents into a handlebars template -->
<script type="text/x-handlebars" data-template-name="footer">
    <footer>
        Copywrong blah blah blah<!-- We'll seporate the footer too -->
    </footer>
</script>

<script type="text/x-handlebars" data-template-name="home">
    <div...

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're not going to use the listeners anymore
    }
});

//Now we're going to need to get the router going...

//we use "route.map" to assign "routes" to paths
OurShop.Router.map(function(){
    //Create a route for "index"
    this.route("index", {path:"/"});
    //create a resource (a route that we can goto from here) for monitors
    this.resource("monitors", {path:"/monitors"}, function(){
        this.route("monitors", {path:"/monitors"})
    })
});

//Then we create the route for "index"
OurShop.IndexRoute = Em.Route.extend({
    //renderTemplate is an in-built ember Route function that is called when the application is ready to render this route
    renderTemplate:function(){
        //Here we're going to render the "home" template into the "application" template's "page" outlet
        this.render("home", {into:'application', outlet:"page"});
    }
});

OurShop.MonitorsRoute = Em.Route.extend({
    //renderTemplate is an in-built ember Route function that is called when the application...