javascript - Ember CLI- conditional output within an each loop using a component instead of itemController -

in ember cli app, i'm using {{#each}} helpers output rows of table. 'name' 'created_date' , 'type' defined in related model.

{{#each model |job|}}  <tr>    <td>{{job.name}}</td>    <td>{{job.created_date}}</td>    <td>{{job.type}}</td>    <td>    {{#if typezero}}       <p>content display if value of 'type' 0.</p>    {{/if}}    </td>  </tr>  {{/each}}

in fourth table cell of each row, i'd display content if value of 'type' record 0.

i first tried adding itemcontroller each helper:

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

this gave me error: "uncaught error: assertion failed: value #each loops on must array. passed ***@controller:array:, should have been arraycontroller"

i found itemcontroller deprecated, , components should used instead.

i created component named job-table-row, , updated page template:

  {{#each model |job|}}     {{#job-table-row model=job |jobtablerow|}}      <tr>        <td>{{job.name}}</td>        <td>{{job.created_date}}</td>        <td>{{job.type}}</td>        <td>        {{#if typezero}}          <p>content display if value of 'type' 0.</p>        {{/if}}        </td>      </tr>     {{/job-table-row}}    {{/each}}

in component handlebars file, use {{yield}} , displays fine.

in component js file, have:

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

the problem function 'typezero' doesn't run. possible achieve component, or need use different method altogether?

you cannot yield because typezero exists inside component. instead, move template component:

// templates/components/job-table-row.hbs  <td>{{model.name}}</td> <td>{{model.created_date}}</td> <td>{{model.type}}</td> <td>   {{#if statuszero}}     <p>content display if value of 'status' 0.</p>   {{/if}} </td> 

and simplify template outside:

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

also, can replace complex method computed property:

// components/job-table-row.js  import ember 'ember';  export default ember.component.extend({   tagname: 'tr',   statuszero: ember.computed.equal('model.status', 0) }); 

see working @ http://ember-twiddle.com/de8a41b497ef4f116bab