CODEWITHSUNDEEP
ember.jshandlebars.js
jackel414
jackel414

Reputation: 1686

Handlebars Template Not Rendering Properly with Ember.js

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.

Upvotes: 0

Views: 324

Answers (2)

Susai
Susai

Reputation: 565

You have template hierarchy like this

application
  -index (generated)
  -users
     -index (generated)
     -user
        -index (generated)
        -edit
     -create

You have to tell the placeholder {{outlet}} in parent template where the child templates get rendered.

Assume we have two child templates and first child template get rendered in the area where {{outlet}} given, so navigating to second child template will replace the first child. But parent template content will be retained, only the area for child template will be changed.

Have a look at it

http://emberjs.com/guides/routing/defining-your-routes/

http://emberjs.com/guides/templates/rendering-with-helpers/

Upvotes: 2

RyanHirsch
RyanHirsch

Reputation: 1847

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

Upvotes: 2

Related Questions