Question

在我的Ember CLI应用程序中，我使用{{#each}}帮助程序输出表的行。＆＃39;名称＆＃39; ＆＃39; CREATED_DATE＆＃39;和＆＃39;键入＆＃39;都是在相关模型中定义的。

＆＃13;

{{#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}}

＆＃13;

在每行的第四个表格单元格中，如果＆＃39;键入＆＃39;的值，我希望显示某些内容。该记录为0。

我首先尝试将itemController添加到每个帮助器中：

＆＃13;

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

＆＃13;

这给了我一个错误：＆＃34;未捕获错误：断言失败：#each循环的值必须是一个数组。你传递了*** @ controller：array：，但它应该是一个ArrayController＆＃34;

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

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

＆＃13;

  {{#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}}

＆＃13;

在组件手柄文件中，我只使用{{yield}}，一切正常。

在组件js文件中，我有：

＆＃13;

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'),

});

＆＃13;

这个问题是功能＆＃39; typeZero＆＃39;没有运行。是否可以使用组件实现此目的，或者我是否需要完全使用不同的方法？

Answer 1

您无法屈服，因为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

查看所有工作

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

1 个答案: