So I’m performing a calculation on page load for a component. I’m display multiple rows of data from my controller and then calling a component for each individual record in the table.
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
{{#each model as |contract|}}
{{partials/contracts/contract-item item=contract}}
{{/each}}
</tbody>
</table>
The component looks like this:
<td>{{item.fname}}</td>
<td> {{item.lname}}</td>
However, I want the tr
tag to have a class of is-expired
based on a calculation. This is what I have for my component:
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'tr',
classNameBindings: ['isExpired'],
isExpired: function() {
var exp_date = moment(this.get('item.exp_date'));
var today = moment();
var expires = exp_date.diff(today, 'days');
if (expires <= -90) {
return true;
}
return false;
}.property('item.exp_date')
});
I have this calculation done in the model on a property that is called isExpired
, but I get the same result just doing return this.get('item.isExpired')
I also get the same result doing:
isExpired: Ember.computed.alias('item.isExpired')
Does anybody know how to calculate this in time on page load?
Thank you…
When I view the individual contract detail page, the isExpired
property works as expected and on page load… but on the entire results… it does not.