javascript - A boolean for a condition met for a list of data in Ember Cli component -


i have hbs displays table list of data fed component

templates/components/results.hbs

 <tbody>         {{#each resultsdetail |resultdetail|}}         <tr>            <td>                 {{resultdetail.samples}}             </td>             <td class=" {{if isfailure "alert-danger" "alert-success"}}"{{/if}} >                 {{resultdetail.failures}}             </td>         {{/each}} </tbody> 

the corresponding js file components/results.js

export default ember.component.extend({   isfailure: false,  didinsertelement: function () {       this.calculatefailure();  },   calculatefailure: function () {     var resultdetails = this.get('resultsdetails');     (var resultdetail in resultdetails) {         if (resultdetail.failures == 0) this.set('isfailure', true);     } }.observes('resultsdetails'), 

});

i know doing wrong.

what want resultsdetails list, if failure value set 0, want flag false, in handle bar, if data failure td class set alert-danger.

i totally new ember of google , ember guides complex understand. guide me right direction?

thank in advance.

what yuvraj provided true; had problems related code; hence decided prepare following twiddle you. should rely on computed properties whenever possible , avoid observers ember practice. main reason observers not run upon render; hence needed call observer function manually within didinsertelement hook; bad. if @ twiddle provided, see computed property need. used resultsdetail.@each.failures property's dependent key whenever item's failures within resultsdetail array updated computed property triggered again.

secondly, should avoid iterating on array for...in syntax. see following question's answers discussion.

lastly, can use isfailure computed property within template follows:

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

so td assigned both alert , alert-danger classes if isfailure true.

since, after comment, revealed need change class of cell has failures equal 0. in order that; updated answer creating new component called failure-cell. has tagname of td , classnamebindings defined whenever isfailure computed property equal true; alert , alert-danger classes assigned component. can refer following part of official guide further details. note that, no longer need computed property had mentioned within my-component.js.

hope helps.


Comments

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

verilog - Systemverilog dynamic casting issues -

ios - Change Storyboard View using Seague -