Ember.js 配列を参照するプロパティの定義方法

今日は配列を参照するプロパティの定義方法を説明します。
方法は、propertyメソッドの引数に @each を指定します。

var obj = Ember.Object.create({
  todos: [
    Ember.Object.create({isDone: true}),
    Ember.Object.create({isDone: true}),
    Ember.Object.create({isDone: false}),
  ],
  remaining: function() {
    var todos = this.get('todos');
    return todos.filterProperty('isDone', false).get('length');
  }.property('[e-mail]')
});

obj.get('remaining'); // => 1
obj.get('todos')[2].set('isDone', true);
obj.get('remaining'); // => 0

これで、remainingプロパティは、todosに変更が加えられると、自動的に値が更新されます。remainingをさらにテンプレートから参照していると、todosに含まれるisDone == falseの個数が変わるたびに画面表示も更新されます。
ドキュメントによると、Ember.jsが更新通知処理を行うのは以下のタイミングだそうです。

• The isDone property of any of the objects in the todos array changes.
• An item is added to the todos array.
• An item is removed from the todos array.
• The todos property of the controller is changed to a different array.

以上です。今日は詰まることもなく、動作を確認できました。