Ember 控制器中的计算属性

Question

我是 Ember 的初学者。该应用程序是一个睡眠跟踪器。我现在要构建的是过去 N 天内平均睡眠和小睡的小时数。

为了计算平均值，我想我想在控制器上添加一个计算属性。我还没有模型，因为这个应用太原始了。

这是我当前的代码：

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

我的format-duration 辅助函数对接收到的值执行console.log。当需要显示平均值时，format-duration 会收到一个函数而不是一个值。

我也没有在控制器中看到console.log 调用。

在 Handlebars 模板中，我尝试使用：

{{format-duration averageNapDuration() }}

但这会返回语法错误：

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'

作为另一个测试，我将控制器更改为使用计算属性：

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

这一次，format-duration 说它收到 0，这向我表明，模板至少与控制器正确对话。

在哪里可以找到过滤数组的计算属性示例？我必须在上面的代码中更改什么来计算整数的总和？

Answer 1

这会引发解析错误。

{{format-duration averageNapDuration() }}

您不能在辅助参数中调用函数。以下将正常工作。

{{format-duration averageNapDuration }}

你的控制器会是这样的，

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('model.@each.durationInSeconds', function() {
        //You can calculate avg night slepp duration and return the result
    })
});

如果我们将依赖键用作model.[]，那么每次添加/删除事件并更改为全新的不同数组时都会调用计算属性。

如果我们将依赖键用作model.@each.durationInSeconds，那么每次durationInSeconds 属性更改时都会调用计算属性，并且对于每个事件时间事件都将被添加/删除到model。并且整个 model 属性更改为全新的不同数组。

computed properties 和 Computed Properties and Aggregate Data 的 Ember 指南链接会更好地解释。