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

Question

I iterate over an array of objects in the Handberbars Ember.js template and try to display a placeholder image for each using holder.js .

Outside the scope of the #each loop, the holder.js file displays the placeholder image as expected:

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

Inside the #each loop, note images are not displayed:

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

Maybe there is something that I don’t understand about how #each loops work, but is there a trick for getting placeholder images here?

Answer 1

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

You can try add

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

or

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

to the renderTemplate renderTemplate your route. (Better yet, add it after you find out that your controller is loaded with all your data.)

Answer 2

I just want to be a little more explicit if someone like me is faced with similar problems or is confused with how it works.

First add a view for your template if you don’t have one. If you work with 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 with Ember 1.0.0.