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

今日は配列を参照するプロパティの定義方法を説明します。
方法は、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('todos.@each.isDone')
});

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.

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