ember.js - start - emberjs api docs
Manubrios Emberjs#cada asistente lento cuando está vinculado a las propiedades calculadas (1)
Me encuentro con 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. Intente marcar algunos o haga clic en "Agregar todo"
El código de ejemplo está aquí: http://jsfiddle.net/Jonesy/ed3ZS/4/
Noté que los childViews en el DOM se vuelven a renderizar con cada cambio, lo que bien podría ser el comportamiento previsto en este momento, pero preferiría poder eliminar un todo de la lista de todos los terminados de DOM. individualmente y anexado al final de la lista completa de todos, que en teoría sería mucho menos costoso.
Lo que espero haber respondido es si estoy viendo un problema de rendimiento con las vistas de la colección Ember, o si mostrar una lista poblada de una propiedad calculada es una mala idea, y si es así, tendré que administrar manualmente la ubicación del modelo de tareas pendientes en la capa de vista, ya que cambia de inacabado a terminado y viceversa.
Este es un efecto secundario de cómo funciona {{#each}} (y CollectionView , que es lo que lo potencia).
Internamente, CollectionView utiliza algo llamado observadores de matriz . Un observador de matriz le permite suscribirse a las mutaciones realizadas en una matriz cuando hayan terminado de usar los métodos de mutación de pushObject ( replace , pushObject , popObject , etc.) La API para los observadores de matriz se describe aquí .
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 publicaste, sin embargo, la matriz no está mutada: estás creando un nuevo objeto Array cada vez que se agrega o elimina un nuevo elemento. 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 cambia. Puede ver la aplicación Contactos para ver un ejemplo de cómo hacer esto .
Obviamente, este es un patrón muy común, y nos gustaría agregar algún tipo de filtrado que haga lo correcto de forma predeterminada a Ember.ArrayController más Ember.ArrayController .