Ember.js not re-rendering template after Model loaded

Question

I'm learning Ember.js using a Ruby on Rails API server. I've got the routes, template, and model all setup and working - but the template is never re-rendered once the data has been loaded from the API server. I'm not getting any error messages, and I know the customer is being loaded from looking at the Ember inspector.

Customer list is supposed to be displayed after start customer not being displayed

Customer list is being loaded correctly from the API server: customer is being loaded from the API

Router

// javacripts/router.js
App.Router.map(function() {
  this.resource('customers', { path: "/" });
});

Customers Route

// javascripts/routes/customer_routes.js
App.CustomersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('customer');
  },
  renderTemplate: function() {
    this.render('customers/index');
  }
});

Customer Model

// javascripts/models/customer.js
App.Customer = DS.Model.extend({
  name: DS.attr('string')
});

Customer Index Template

// javacripts/templates/customers/index.js.handlebars
<ul>
  <li>start</li>
  {{#each customers}}
    <li>{{name}}</li>
  {{/each}}
</ul>

Store

// javacripts/store.js
App.ApplicationAdapter = DS.ActiveModelAdapter.extend({
  namespace: 'api/v1'
});

Is anything actually loading, like your application template file? — Ryan
@ryan - it looks like everything is being loaded just fine. Both application.js.handlebars & index.js.handlebars are being rendered. But the {{#each}} loop in index is always empty — lightswitch05
I was wondering cause the extension your using is odd. usually files are just extended with .handlebars or .hbs I've never actually seen .js.handlebars. — Ryan
@ryan I've been looking at discourse for examples since they use Ember & Rails. That is how they name their templates, so I did too. source — lightswitch05

Joachim H. Skeie Joachim H. Skeie · Accepted Answer · 2014-07-01T23:04:32

Instead of

{{#each customers}}

It should read either

{{#each controller}}
  {{name}}
{{/each}}

or

{{#each customer in controller}}
    {{customer.name}}
{{/each}}

I have recently posted two screencasts. One showing how to get started with a new application, and one showing how to setup Grunt:

You might also get some use out of a talk I gave earlier this year as well, which goes through developing a simple application during the talk, including Ember Data.

https://www.youtube.com/watch?v=KH5RreHtaaQ

Ember.js not re-rendering template after Model loaded

2 Answers