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() }}

但是这个 returns 语法错误：

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.[]，则每次事件为 added/removed 时都会调用计算的属性并更改为全新的不同数组。

如果我们将依赖键用作 model.@each.durationInSeconds，则每次 durationInSeconds 属性更改时都会调用计算的属性并且每个事件时间事件都是 added/removed 到 model。并且整个 model 属性被更改为全新的不同数组。

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

Ember 控制器中的计算属性

Computed properties in controller in Ember

ember.js

computed-properties