Component property not calculating on page load in time

@hschillig wrote:

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.

Posts: 1

Participants: 1

Read full topic