EmberJS Simple Routing Example

A simple example of EmberJS routing.

by Manna

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1> Ember Routing</h1>
    <div id="navigation">
       <a href="#">Home</a>
       <a href="#about">About</a>
    </div>    
    <br />    
    {{outlet}}   
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h2> Home Page </h2>
</script>
<script type="text/x-handlebars" data-template-name="about">
    <h2> About Page </h2>
</script>

CSS

h1 {
    font-size: 1.6em;
    padding-bottom: 10px;
}
h2 {
    font-size: 1.4em;
}
ul {
    padding: 15px;
    font-size: 1.4em;
    color: green;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
    //first paramater refers to the template
    this.route('home', { path: '/' });
    this.route('about');
});