Component property not calculating on page load in time


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">
      <th>First Name</th>
      <th>Last Name</th>
    {{#each model as |contract|}}
      {{partials/contracts/contract-item item=contract}}

The component looks like this:

<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;

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.


Anybody have any idea what is going on here?


This might be my fault, but I’m not sure what the “same result” is? What is the undesired behaviour that you are experiencing? You just keep writing “the same result”. What result? What do you mean by it’s not calculating it in time?


The tr tag does NOT get the is-expired class appended to it unless I am viewing that specific record and it is expired… on page load, it will not add that class to the tr tag of the component even though it should… Because it’s coming up true.