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的Ember指南链接和Computed Properties and Aggregate Data会更好地解释。

Ember

1 个答案: