Ember Model Computed Property Not Working

Question

I have a module logging errors on my MEEN stack app. I have a model for my ember route that pulls in data from my express server via mongoose.

I wanted to alter the date property on my model to format the date differently from how it is stored in the mongo database to save some real estate on the page ie: Tue Sep 19 2017 16:57:17 GMT-0400 (EDT) to 2017-09-19.

I followed the Ember docs for computer properties on the model but the template is not displaying the computed value.

model:

import DS from 'ember-data';
import Ember from 'Ember';

export default DS.Model.extend({
  error: DS.attr('string'),
  user: DS.attr('string'),
  module: DS.attr('string'),
  date: DS.attr('string'),
  smallDate: Ember.computed('date', function() {
    var dateObj = new Date(this.get('date'));
    return `${dateObj.getFullYear()}-${dateObj.getMonth()}-${dateObj.getDate()}`;
  })
});

template:

<div class="row">
  <div class="col-md-8 col-md-offset-2 text-center">
    <h2 class="toolTitle">Blame Panel</h2>
  </div>
</div>
<div class="col-md-8 col-md-offset-2">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>User</th>
        <th>Error</th>
        <th>Component</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      {{#each model as |blame index|}}
        <tr>
          <th scope="row">{{index}}</th>
          <td>{{blame.user}}</td>
          <td>{{blame.error}}</td>
          <td>{{blame.module}}</td>
          <td>{{blame.smallDate}}</td>
        </tr>
      {{/each}}
    </tbody>
  </table>
</div>

If I just use the date property of the model it displays the unformatted date fine.

acorncom acorncom · Accepted Answer · 2017-09-27T13:32:55

That looks like it should be working. What behavior are you seeing instead?

Another option that may fit your setup better is to move that formatting concern out into a helper. If you do ember g helper format-date then you can use that same approach to formatting your date in a variety of places like this:

{{format-date blame.date}}

Ember Model Computed Property Not Working

1 Answers