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.)

Answer 2

I just want to be a bit more explicit in case anyone like me runs into similar problems or gets themselves confused with how it works.

First, add a View for your template if you don't have one. If you're working with the MushroomsRoute, create a MushroomsView. Inside your view, do something like this:

App.MushroomsView = Ember.View.extend({
    didInsertElement: function() {
        Ember.run.next(function() {
            Holder.run();
        })
     }
});

And that should work -- or at least it does with Ember 1.0.0.