Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="people">
  <h2>Index Content:</h2>
  <ul>
    {{#each}}
      <li>
          {{#linkTo "people.show" this}}
              {{firstName}} {{lastName}}
          {{/linkTo}}
      </li>
    {{/each}}
   </ul>
    
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="people/show">
    <h2>Person</h2>
    
    {{firstName}} {{lastName}}
    
    {{#linkTo "people.index"}}Index{{/linkTo}}
</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() {
    this.resource("people", function() {
        this.route("show", { path: ":person_id" });
    });
})

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo("people");
    }
})    
    
App.PeopleRoute = Ember.Route.extend({
  model: function() {
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  },    
});

App.PeopleShowRoute = Ember.Route.extend({
    model: function(params) {
        return {firstName: 'Kris', lastName: 'Selden'};
    },
    
    renderTemplate: function() {
        this.render({ into: "application" });
    }
});