0

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.

wingskush
  • 534
  • 1
  • 6
  • 22

2 Answers2

1

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.

Prabhakar Poudel
  • 339
  • 7
  • 19
1

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 resultsDetail.@each.failures 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.

Community
  • 1
  • 1
feanor07
  • 3,328
  • 15
  • 27
  • yes this did indeed work thanks a lot, but what i want is to highlight a single table cell, in case failure ==0 , i want to highlight only that table cell instead of highlighting the whole column. Is that possible? – wingskush Apr 07 '17 at 07:56
  • this was not clear in your code; i will update the twiddle in a couple of minutes. wait for it :) – feanor07 Apr 07 '17 at 07:57
  • thank you, being a total beginner most of the things are so strange and complex – wingskush Apr 07 '17 at 08:03
  • I got the same feeling when I started, you can walk over guide (although it lacks some serious stuff) and keep on asking questions to get experienced. Good luck! note: i have already updated the twiddle regarding your comment. take a re-look at it please. – feanor07 Apr 07 '17 at 08:11