javascript - Ember Cli 组件中数据列表满足条件的 bool 值

Question

我有一个 hbs，它显示一个表格，其中包含输入组件的数据列表

模板/组件/结果.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文件是 组件/结果.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，我希望标志为false，所以在我的句柄栏中，如果数据失败，我的td类设置为alert-danger .

我对 ember 完全陌生，所以大多数 google 和 ember 指南都太复杂而难以理解。谁能引导我走向正确的方向？

提前谢谢您。

Answer 1

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

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

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

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

这样，如果 isFailure 为 true，td 将被分配 alert 和 alert-danger 类。

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

希望这有帮助。