如何在Handlebars（Ember.js）模板的#each循環中使用holder.js？

Question

我正在循環Ember.js Handlebars模板中的對象數組，並嘗試顯示每個使用holder.js的佔位符圖像。

的#each環上下文之外，holder.js呈現爲預期的佔位符圖像：

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

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

當內部的#each循環，沒有佔位符圖像出現：

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

也許我不瞭解#each循環是如何工作的，但是讓佔位符圖像出現在這裏有一個竅門嗎？

Answer 1

問題是Holder.run()在Ember之前調用所有數據，因此您必須在以後再次調用它。

你可以嘗試添加

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

或

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

到renderTemplate鉤路線的。 （更好的辦法是在你知道你的控制器已經加載了你所有的數據之後再添加它。）

Answer 2

我只是想更加明確一些，以防像我這樣的人遇到類似的問題或讓自己感到困惑有用。

首先，爲您的模板添加一個視圖，如果您沒有。如果您正在使用MushroomsRoute，請創建一個MushroomsView。在你看來，做這樣的事情：

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

而這應該工作 - 或者至少它與Ember 1.0.0。