Handlebars Template Not Rendering Properly with Ember.js

Question

I have a simple Ember.js app that is using Handlebars templates. I have a few users routes as outlined in my main.js file below:

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


App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  }
});
App.UsersController = Ember.ArrayController.extend({
  sortProperties: ['first_name']
});    
App.UserRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('user', params.user_id);
  }
});
App.UserController = Ember.ObjectController.extend({});

To got with that, I have the below two templates (in the same file):

<script type="text/x-handlebars" data-template-name="users">
  <ol class='breadcrumb'>
    <li>{{#link-to 'index'}}Home{{/link-to}}</li>
    <li class='active'>Users</li>
  </ol>

  <ul class='list-unstyled'>
    {{#each}}
      <li>{{#link-to 'user' this class='label label-primary'}}{{first_name}}{{/link-to}}</li>
    {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="user">
  <ol class='breadcrumb'>
    <li>{{#link-to 'index'}}Home{{/link-to}}</li>
    <li class='active'>User: {{first_name}}</li>
  </ol>
  <p>Test</p>
</script>

However, the "user" template doesn't load. If I access "/users/4" it just loads the "users" template again. Any idea what I'm doing wrong? Thanks.

RyanHirsch RyanHirsch · Accepted Answer · 2014-10-23T22:38:17

You need to add an {{outlet}} to your users template so that it knows where the subroutes (in your case user) should be rendered.

Handlebars Template Not Rendering Properly with Ember.js

2 Answers