How can I use holder.js inside an #each loop in Handlebars (Ember.js) template?

Question

I'm looping through an array of objects in an Ember.js Handlebars template and trying to display a placeholder image for each using holder.js.

Outside of the #each loop context, holder.js renders the placeholder image as expected:

<img data-src="holder.js/100x100" src='' alt='person image' />

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

When inside the #each loop, no placeholder images appear:

{{#each person in controller}}
  <img data-src="holder.js/100x100" src='' alt='person image' />
  person.name
{{/each}}

Perhaps there's something I'm not understanding about how #each loops work, but is there a trick to getting placeholder images to appear here?

Answer 1

The problem is Holder.run() is called before Ember loops through all your data, so you have to call it yourself again at a later point.

You could try adding

Em.run.schedule('afterRender', null, function () { Holder.run(); })

or

Em.run.next(function () { Holder.run(); })

to the renderTemplate hook of your route. (Even better would be to add it after you know your controller has been loaded with all your data.)