Emberjs Handlebars #each helper slow when bound to computed properties

Question

Tengo un problema de rendimiento cuando presento una lista de elementos usando #each helper o una vista de colección vinculada a algunas propiedades calculadas de un Ember.ArrayController. El rendimiento está bien con una pequeña lista de 10 a 20 elementos, pero alrededor de 50 a 100 comienza a lag bastante notable. Trate de ver unas cuantas todos o haciendo clic en "Añadir Todo"

Ejemplo código está aquí: http://jsfiddle.net/Jonesy/ed3ZS/4/

me di cuenta de que los childViews en el DOM ser re-renderizados con cada cambio, lo que podría muy bien ser el comportamiento previsto por el momento, pero preferiría poder simplemente eliminar un todo de la lista DOM de todos inacabados y anexar al final de la lista de todos los terminados, lo que en teoría sería mucho menos costoso.

Lo que espero haber respondido es si estoy viendo un problema de rendimiento con vistas de colección Ember, o si mostrar una lista poblada de una propiedad calculada es una mala idea, y si es así, tendré que administrarla manualmente la ubicación del modelo de tareas pendientes en la capa de visualización a medida que cambia de inacabado a terminado y viceversa.

Answer 1

Esto es un efecto secundario de cómo funciona {{#each}} (y CollectionView, que es lo que lo alimenta).

Internamente, CollectionView utiliza algo llamado array observadores. Un observador de matriz le permite suscribirse a mutaciones realizadas en una matriz cuando se hayan completado con los métodos de mutación Ember.Array (replace, pushObject, popObject, etc.) API para observadores de matriz is described here.

Lo que esto significa es que, si inserta un objeto nuevo en una vista de colección, insertará un nuevo elemento en el DOM y dejará el resto en su lugar.

En el ejemplo que publicó, sin embargo, la matriz no se está mutando: está creando un nuevo objeto Array cada vez que se agrega o elimina un elemento nuevo. Cuando la vinculación se sincroniza, reemplaza la matriz anterior con la nueva matriz. Para {{#each}}, esto no es diferente de eliminar todos los elementos y luego volver a agregarlos.

La solución al problema es usar una sola matriz, en lugar de una propiedad calculada que devuelve un objeto de matriz diferente cada vez que cambios. Usted puede ver the Contacts app for an example of how to do this.

Obviamente, este es un patrón muy común, y nos gustaría agregar algún tipo de filtrado que haga lo correcto por defecto a Ember.ArrayController por el camino.