Emberjsハンドルバー計算されたプロパティにバインドされたときの各ヘルパーの速度が遅い

Question

Ember.ArrayControllerの計算されたプロパティにバインドされた#eachヘルパーまたはコレクションビューを使用してアイテムのリストをレンダリングすると、パフォーマンスは10〜20個の小さなリストでは問題ありませんが、50〜100個ほどで目立ちます。いくつかのドスをオフにチェックするか、「藤堂を追加」をクリックしてみ

例のコードはここにある：http://jsfiddle.net/Jonesy/ed3ZS/4/

私は非常によく意図された動作することができた、DOM内childViewsは、それぞれの変更で再レンダリングされますことに気づきました現時点では、未完成のtodosリストのDOMからtodoを個別に削除し、完了したtodosリストの最後に追加することができます。これは、理論的にはコストがかかりません。

私が答えたいと思うのは、Emberコレクションのビューでパフォーマンスの問題を見ているのか、計算されたプロパティから悪い考えを集めたリストを表示しているのかどうかです。もしそうなら、私は手動で管理する必要がありますビューのレイヤー内での未完成から終わりへの変更、およびその逆の変更であるtodoモデルの位置。

Answer 1

これは、{{#each}}（およびそれに対応するものはCollectionView）の副作用です。

内部では、CollectionViewはアレイオブザーバと呼ばれるものを使用します。配列オブザーバは、Ember.Arrayの突然変異方法（replace,pushObject、popObjectなど）を使用して配列に加えられた突然変異をサブスクライブすることができます。アレイオブザーバのAPI is described here。

これは、新しいオブジェクトをコレクションビューにプッシュすると、DOMに1つの新しい要素をレンダリングして残りの部分をそのまま残すことを意味します。

しかし、投稿した例では、配列には変異がありません。新しいアイテムを追加または削除するたびに、新しいArrayオブジェクトを作成しています。バインディングが同期化されると、は、古い配列を新しい配列に置き換えます。 {{#each}}にするには、すべての要素を削除してから再度追加するだけです。

解決方法は、毎回異なる配列オブジェクトを返す計算されたプロパティではなく、単一の配列を使用することです変更。 the Contacts app for an example of how to do thisが表示されます。

明らかに、これは非常に一般的なパターンです。デフォルトで適切なことを実行するフィルタリングを追加したいと考えています。Ember.ArrayController