Ember.js Routing

by Daniel Clasen

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>
<script src="http://builds.emberjs.com/tags/v1.0.0-beta.11/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Ember.js Routing</h1>
    <div id="navigation">
        <a href="#/">Home</a>
        <a href="#/blog">Blog</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="blog">
    <h2>Blog Page</h2>
    <p>{{blogcontent}}</p>
</script>

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
    //first paramater refers to the template
    this.route('home', { path: '/' });
    this.route('blog'); // does not need a path due to the naming convention
});

App.BlogRoute = Ember.Route.extend({
  model: function(){
      return{
          blogcontent: 'I am a blog entry!'
      };
  }
});