Ember CLI 组件中数据列表满足条件的布尔值

Question

我有一个 hbs，它显示 table 用于提供给组件的数据列表

templates/components/results.hbs

 <tbody>
        {{#each resultsDetail as |resultDetail|}}
        <tr>
           <td>
                {{resultDetail.samples}}
            </td>
            <td class=" {{if isFailure "alert-danger" "alert-success"}}"{{/if}} >
                {{resultDetail.failures}}
            </td>
        {{/each}}
</tbody>

对应的js文件为 components/results.js

export default Ember.Component.extend({

 isFailure: false,
 didInsertElement: function () {

     this.calculateFailure();
 },

 calculateFailure: function () {
    var resultDetails = this.get('resultsDetails');
    for (var resultDetail in resultDetails) {
        if (resultDetail.failures == 0) this.set('isFailure', true);
    }
}.observes('resultsDetails'),

});

我知道我做的是错的。

我想要的是 resultsDetails 列表，如果失败值设置为 0，我希望标志为假，所以在我的手柄栏中，如果数据失败我的 td class设置为警报危险。

我是 ember 的新手，所以大多数 google 和 ember 指南都太复杂而难以理解。谁能指导我正确的方向？

提前致谢。

Answer 1

首先，您一定要阅读 ember 网站上的指南，现在请阅读 conditionals。解决问题的车把方法是按照指南所述以这种方式包含 {{if}}：

<div class="is-car {{if isFailure "alert-danger" "alert-success"}}">
</div>

在这个 {{if}} 助手的内联调用中，它 returns alert-danger 当 isFailure 为真时 alert-success 当 isFailure 为假时。

或者简单地说：

 <div class="is-car {{if isFailure "alert-danger"}}">
 </div>

根据您的情况，相应地设置 isFalure 的值。

Answer 2

yuvraj 提供的内容完全正确；但是你的代码有一些问题；因此，我决定为您准备以下twiddle。您应该尽可能依赖计算属性，并避免观察者作为一种良好的 ember 做法。主要原因是观察者在渲染时不运行；因此你需要在 didInsertElement 钩子中手动调用观察者函数；这很糟糕。如果您查看我提供的 twiddle，您会发现计算出的属性就是您所需要的。我使用 resultsDetail.@each.failures 作为属性的依赖键，这样每当 resultsDetail 数组中的项目 failures 更新时，您计算的属性将再次触发。

其次，您应该避免使用 for...in 语法迭代数组。请参阅以下 question's answers 以获得良好的讨论。

最后，您可以在模板中使用 isFailure 计算属性，如下所示：

 <td class={{if isFailure 'alert alert-danger'}}>

以便 td 将同时分配 alert 和 alert-danger classes 如果 isFailure 为真。

因为在您发表评论后，我们发现您需要做的只是更改 failures 等于 0 的单元格的 class。为了做到这一点；我通过创建一个名为 failure-cell 的新组件更新了答案。它具有 td 的 tagName 并且定义了 classNameBindings 以便每当 isFailure 计算时属性等于 true； alert 和 alert-danger classes 将分配给组件。您可以参考 following part of official guide 了解更多详情。请注意，我们不再需要我之前在 my-component.js.

中提到的计算属性

希望这对您有所帮助。

Ember CLI 组件中数据列表满足条件的布尔值

A boolean for a condition met for a list of data in Ember Cli component

javascript

ember.js

handlebars.java