0

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

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

我对 ember 完全陌生，因此大多数 google 和 ember 指南都太复杂而无法理解。谁能指导我正确的方向？

先感谢您。

4

2 回答 2

1

首先，您绝对应该阅读 ember 网站上的指南，现在请阅读条件语句。{{if}}正如指南所说，解决您的问题的车把方法将以这种方式包括：

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

在 {{if}} 助手的这个内联调用中，它返回alert-danger什么时候isFailure为真，alert-success什么时候isFailure为假。

或者简单地说：

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

与您的情况一样，并相应地设置值isFalure。

于 2017-04-06T16:57:51.723 回答
1

yuvraj 提供的一切都是真的。但是您遇到了一些与您的代码相关的问题；因此我决定为你准备下面的小玩意儿。您应该尽可能依赖计算属性，并避免使用观察者作为一种良好的 ember 做法。主要原因是观察者不会在渲染时运行；因此您需要在didInsertElement钩子中手动调用观察者函数；这很糟糕。如果您查看我提供的 twiddle，您会发现只需要一个计算属性。我用作resultsDetail.@each.failures属性的依赖键，因此每当更新数组中的项目时，failures您resultsDetail的计算属性将再次被触发。

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

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

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

如果为真，td则将同时分配alert和alert-danger类。isFailure

因为，在您发表评论后，发现您需要做的只是更改failures等于 0 的单元格类别。为了做到这一点；我通过创建一个名为failure-cell. 它具有tagNameoftd并且classNameBindings被定义为每当isFailure计算属性等于true; alert并且alert-danger类将被分配给组件。您可以参考官方指南的以下部分以获取更多详细信息。请注意，我们不再需要我之前在my-component.js.

希望这可以帮助。

于 2017-04-06T19:22:04.213 回答