EmberJS Simple Templates Example

A simple example of EmberJS templates.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.13/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.13/ember-template-compiler.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div id="navigation">
       <a href="#">Home</a>
       <a href="#info">Info</a>
    </div>    
    <br />    
    {{outlet}}   
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h2>Home</h2>
    {{model.greeting}}
</script>
<script type="text/x-handlebars" data-template-name="info">
    <h2>Info</h2>
    {{model}}
</script>

JavaScript

App = Ember.Application.create({});

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

App.HomeRoute = Ember.Route.extend({
    model: function () {
    	console.log('HomeRoute');
        return {
            greeting: 'Welcome to the application.'
        }
    }
});

App.InfoRoute = Ember.Route.extend({
  model: function(){
  		console.log('InfoRoute');
      return {asd: true};
      //return $.get('/echo/json/');
  }
});