Ember Nested Routes

Ember Nested Routes

by Nirvanachain

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.min.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
  </script>


  <script type="text/x-handlebars" id="users">
    <p>List of Users</p>
    <ul>
    {{#each}}
      <li>
        {{#link-to 'users.show' this}}
          {{firstName}}
        {{/link-to}}
      </li>
    {{/each}}
    </ul>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="show">
      <h3>How do I log the contents of the object in this view?</h3>
    <p>First Name = {{firstName}}</p>
    <p>Last Name = {{lastName}}</p>
    <p>Full Name = {{fullName}}</p>
  </script>

CSS

ul {
    border-bottom: 1px solid #999;
    padding-bottom: 1em;
}

JavaScript

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.User = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

App.User.FIXTURES = [
  {
    id: 1,
    firstName: 'Luke',
    lastName: 'Skywalker'
  },
  {
    id: 2,
    firstName: 'Frodo',
    lastName: 'Baggins'
  }
];

App.Router.map(function() {
  this.resource('users', {path: '/'}, function() {
    this.route('show', {path: ':user_id'});
  });
});

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  }
});

App.UsersShowRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('user', params.user_id);
  },
  templateName: 'show'
});