如何在 Handlebars (Ember.js) 模板的 #each 循环中使用 holder.js？答案

【问题标题】：How can I use holder.js inside an #each loop in Handlebars (Ember.js) template?如何在 Handlebars (Ember.js) 模板的 #each 循环中使用 holder.js？
【发布时间】：2013-05-22 22:13:08
【问题描述】：

我正在遍历 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 循环的工作原理有些不理解，但有什么技巧可以让占位符图像出现在这里？

【问题讨论】：

jsbin.com/imafuq/8/edit

标签： ember.js handlebars.js holder.js

【解决方案1】：

我只是想更明确一点，以防像我这样的人遇到类似问题或对它的工作原理感到困惑。

首先，如果您没有模板，请为您的模板添加一个视图。如果您正在使用 MushroomsRoute，请创建一个 MushroomsView。在您的视图中，执行以下操作：

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

这应该可以工作——或者至少在 Ember 1.0.0 上可以。

【讨论】：

【解决方案2】：

问题是Holder.run() 在Ember 循环遍历您的所有数据之前被调用，因此您必须稍后自己再次调用它。

你可以试试添加

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

或

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

到您路线的renderTemplate 钩子。（更好的是在您知道控制器已加载所有数据后添加它。）

【讨论】：