Computed properties in controller in Ember

Question

I'm a raw beginner with Ember. The app is a sleep tracker. What I'm trying to build right now is the average number of hours slept and napped, over the past N days.

To calculate the average, I believe I want to add a computed property on the controller. I don't have a model yet, because the app is so raw.

Here is my current code:

// app/routes/home.js
import Ember from 'ember';

let events = [
  {
    "dow": 5,
    "durationInSeconds": 29280,
    "endAt": 1471087260000,
    "startAt": 1471057980000,
    "timezone": "America/Montreal"
  },
  { ... }
]

export default Ember.Route.extend({
  model() {
    return events.sortBy("startAt").reverse();
  }
});

// app/controllers/home.js
import Ember from 'ember';

export default Ember.Controller.extend({
  averageNapDuration() {
    console.log("model: %o", this.get('model'));
    return 0;
  },

  averageNightDuration() {
    // TODO
  }
});

// app/templates/home.hbs
<table>
  ..
  <tfoot>
    <tr>
      <td scope="row" colspan="3">Average nap</td>
      <td class="duration">{{format-duration averageNapDuration}}</td>
    </tr>
    <tr>
      <td scope="row" colspan="3">Average night</td>
      <td class="duration">{{format-duration 22680}}</td>
    </tr>
  </tfoot>
</table>

My format-duration helper function does a console.log of the received values. When it's time to display the average, format-duration receives a function instead of a value.

I also failed to see the console.log call in the controller.

In the Handlebars template, I tried using:

{{format-duration averageNapDuration() }}

but this returns a syntax error:

Error: Parse error on line 48:
...">{{format-duration averageNapDuration()
-----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'UNDEFINED', 'NULL', 'DATA', 'SEP', got 'INVALID'

As another test, I changed my controller to use a computed property:

averageNapDuration: Ember.computed.sum('@each.durationInSeconds')

This time, the format-duration says it received 0, which indicates to me, that the template is at least talking to the controller correctly.

Where can I find examples of computed properties on filtered arrays? What must I change in the code above to calculate the sum of an integer?

If you want to use a computed property, why don't you read up on how to write them, either using Ember.computed or the function() {}.computed syntax? The docs are clear enough. — user663031
Wher is the format-duration helper? I think the understanding of that, is part of the problem. You should create a simplified ember-twiddle to get to the bottom of this. — sheriffderek
@sheriffderek, the format-duration helper has no importance to the discussion at hand. It already correctly formats a plain value. The problem is exposed on this Twiddle: ember-twiddle.com/2596daefabd8a1e2d3439465b6f0df45. The nap function returns a plain value, and that is incorrectly displayed in the generated HTML. On the other hand, the night function returns a computed value, which is correctly displayed. Look at the console: night logs, while nap doesn't. I expected to be able to declare a function and have it execute when called from the template. — François Beausoleil

Ember Freak Ember Freak · Accepted Answer · 2017-01-07T02:31:46

This throws parse error.

{{format-duration averageNapDuration() }}

You can't call function in helper arguments. the below will work fine.

{{format-duration averageNapDuration }}

Your controller would be like,

import Ember from 'ember';

export default Ember.Controller.extend({
    averageNapDuration: Ember.computed('model', function() {
        console.log("model: %o", this.get('model'));
        //You can calculate avg nap duration and return the result
        return 0;
    }),
    //this computed property will be called for every durationInSeconds property changes
    averageNightDuration: Ember.computed('[email protected]', function() {
        //You can calculate avg night slepp duration and return the result
    })
});

If we use the dependant key as model.[] then computed property will be called for every time event is added/removed and changed to brand new different array.

If we use the dependant key as [email protected] then computed property will be called for every time durationInSeconds property changes and also for every event time event is added/removed to model. and entire model property is changed to brand new different array.

Ember guides link for computed properties and Computed Properties and Aggregate Data will explain better.

Computed properties in controller in Ember

1 Answers