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”
ember-data：“^ 2.2.1”
ember：“2.2.0”
节点：“0.12.7”
npm：“2.14.10”
os：“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，因为它是异步承诺。

编辑：对于记录，不建议在示例中使用计算属性中的promises。它可能比任何事情都更令人头疼。

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

1 个答案: