在每个帮助器中绑定到模型关系属性失败

Question

在每个帮助器中绑定到模型关系属性失败，如下所示：

这是我的模型：

//app/models/category.js
export default DS.Model.extend({
  name: DS.attr(),
  image: DS.belongsTo('image', { async: true }),
});

//app/models/image.js
export default DS.Model.extend({
  name: DS.attr('string'),
  thumbfullfilepath: DS.attr('string'),
  category: DS.belongsTo('category', { async: true })
});

当我在下面的每个车把助手中运行类别模型以检索图像标签的“thumbfullfilepath”时，没有值绑定到 img src：

{{#each model as |category|}} 
    <div class="small-element item">
        <div class="cat-name"><a href="#">{{category.name}}</a></div>
        <div class="cat-name edit">{{#link-to 'admin.categories.edit' category}}Edit{{/link-to}}</div>
        <span class="entry-thumb">
            <img src={{category.image.thumbfullfilepath}} alt="">
        </span>   
    </div>
{{/each}}

但是，当我访问加载单个类别模型的“admin.categories.edit”路由时，我已经验证了关系绑定在单个模型的显示上有效，{{category.image.thumbfullfilepath}} 路径是检索并反映在模板中。这让我相信，由于某种原因，模型关系绑定在模板中的每个车把助手中失败。

有人可以在这里阐明一下吗？

## 对我有用的解决方案

我创建了一个图片组件“image-atom”，它的component.js如下：

//pods/components/image-atom.js
export default Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['src', 'alt'],
  alt: '',
  src: Ember.computed(function () {
    this.get('source').then((image) => {
        this.set('src', image.get('thumbfullfilepath'));
    });
    return null;
  })
});

我在下面这样使用它，它可以工作，但感觉很hacky：

{{#each model as |category|}} 
    <div class="small-element item">
        <div class="cat-name"><a href="#">{{category.name}}</a></div>
        <span class="entry-thumb">
          {{image-atom source=category.image alt=""}}
        </span>   
    </div>
{{/each}}

下面是环境细节：

• ember cli 版本：“2.2.0-beta.2”
• 余烬数据：“^2.2.1”
• 余烬：“2.2.0”
• 节点：“0.12.7”
• npm: "2.14.10"
• 操作系统：“darwin x64 El Capitan”

告诉我。

Answer 1

您可能会更好地在图像周围包裹一个 {{if 助手。

<span class="entry-thumb">
  {{#if category.image.thumbfullfilepath}}
    <img src={{category.image.thumbfullfilepath}} alt="">
  {{/if}}
</span>

问题可能是在图像尝试渲染之前没有解决image.thumbfullfilepath，因为它是一个异步承诺。

编辑：为了记录，不建议在您的示例中使用计算属性中的承诺。这可能比什么都更令人头疼。