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コールが表示されませんでした。ハンドルバーテンプレートに

は、私が使用してみました：

{{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' 

を、Iは、計算プロパティを使用する私のコントローラを変更：

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に追加/削除されます。プロパティ全体が全く新しい配列に変更されました。

エムバーガイドリンクcomputed propertiesとComputed Properties and Aggregate Dataの方がよく説明されます。