CODEWITHSUNDEEP
javascriptember.jshandlebars.java
wingskush
wingskush

Reputation: 554

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

I have a hbs that displays a table for the list of data that is fed to the component

templates/components/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>

the corresponding js file is 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'),

});

I know what I am doing is wrong.

What I want is for the resultsDetails list, if the failure value is set to 0, i want the flag to be false, so in my handle bar, if the data is a failure my td class is set to alert-danger.

I am totally new to ember so most of the google and ember guides were too complex to understand. Could anyone guide me to the right direction?

Thank you in advance.

Upvotes: 0

Views: 260

Answers (2)

feanor07
feanor07

Reputation: 3368

What yuvraj provided is simply true; however you had some problems related with your code; hence I decided to prepare the following twiddle for you. You should rely on computed properties whenever possible and avoid observers as a good ember practice. The main reason is observers do not run upon render; hence you needed to call the observer function manually within didInsertElement hook; which is bad. If you look at the twiddle I provided, you will see that a computed property is all you need. I used [email protected] as property's dependent key so that whenever an item's failures within resultsDetail array is updated your computed property will be triggered again.

Secondly, you should avoid iterating over an array with for...in syntax. See the following question's answers for a good discussion.

Lastly, you can use isFailure computed property within template as follows:

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

so that td will be assigned both alert and alert-danger classes if isFailure is true.

Since, after your comment, it is revealed that what you need to do is just change class of cell that has failures equal to 0. In order to do that; I updated the answer by creating a new component called failure-cell. It has tagName of td and classNameBindings is defined so that whenever isFailure computed property is equal to true; alert and alert-danger classes will be assigned to the component. You can refer to following part of official guide for further details. Note that, we no longer need computed property I had mentioned previously within my-component.js.

Hope this helps.

Upvotes: 1

Prabhakar Poudel
Prabhakar Poudel

Reputation: 339

Firstly you should definitely read the guides in ember website, for now do read on conditionals. The handlebars approach of solving your problem would be to include {{if}} in this way as the guide says: 

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

In this inline invocation of {{if}} helper it returns alert-danger when isFailure is true and alert-success when isFailure is false.

Or simply put:

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

As in your case, and set the value for isFalure accordingly.

Upvotes: 1

Related Questions