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有关。

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

2 个答案: