javascript - Ember CLI-使用组件而不是 itemController 在每个循环内进行条件输出

Question

在我的 Ember CLI 应用程序中，我使用 {{#each}} 帮助程序来输出表的行。 'name' 'created_date' 和 'type' 均在相关模型中定义。

{{#each model as |job|}}
<tr>
  <td>{{job.name}}</td>
  <td>{{job.created_date}}</td>
  <td>{{job.type}}</td>
  <td>
  {{#if typeZero}}
     <p>Content that will display if the value of 'type' is 0.</p>
  {{/if}}
  </td>
</tr>
{{/each}}

在每行的第四个表格单元格中，如果该记录的“type”值为 0，我想显示某些内容。

我首先尝试向每个助手添加一个 itemController:

{{#each job in model itemController="jobrowcontroller"}}
......
{{/each}}

这给了我一个错误:“未捕获错误:断言失败:#each 循环的值必须是一个数组。您传递了 ***@controller:array:，但它应该是一个 ArrayController”

我发现itemController is now deprecated, and components should be used instead .

我创建了一个名为 job-table-row 的组件，并更新了页面模板:

  {{#each model as |job|}}
   {{#job-table-row model=job as |jobTableRow|}}
    <tr>
      <td>{{job.name}}</td>
      <td>{{job.created_date}}</td>
      <td>{{job.type}}</td>
      <td>
      {{#if typeZero}}
        <p>Content that will display if the value of 'type' is 0.</p>
      {{/if}}
      </td>
    </tr>
   {{/job-table-row}}
  {{/each}}

在组件 Handlebars 文件中，我只需使用 {{yield}} 即可，一切都显示正常。

在组件js文件中，我有:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  typeZero: function() {
    var currentStatus = this.get('model.status');
    if (currentStatus === 0) {
      this.set('typeZero', true);
    } else this.set('typeZero', false);
  }.on('didInsertElement'),

});

问题是函数“typeZero”不运行。是否可以使用组件来实现此目的，或者我是否需要完全使用不同的方法？

Answer 1

你不能yield，因为typeZero只存在于组件内部。相反，将模板移动到组件:

// templates/components/job-table-row.hbs

<td>{{model.name}}</td>
<td>{{model.created_date}}</td>
<td>{{model.type}}</td>
<td>
  {{#if statusZero}}
    <p>Content that will display if the value of 'status' is 0.</p>
  {{/if}}
</td>

并在外部简化您的模板:

<table>
  <tbody>
    {{#each model as |job|}}
      {{job-table-row model=job}}
    {{/each}}
  </tbody>
</table>

此外，您可以用计算属性替换复杂方法:

// components/job-table-row.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tr',
  statusZero: Ember.computed.equal('model.status', 0)
});

查看所有工作 http://ember-twiddle.com/de8a41b497ef4f116bab