Durante los últimos seis meses he estado trabajando con Backbone. Los primeros dos meses fueron a perder el tiempo, aprendiendo y descubriendo cómo quiero estructurar mi código a su alrededor. Los siguientes 4 meses fueron golpeando una aplicación de producción. No me malinterpretes, Backbone me ha salvado del desorden de miles de líneas del código del lado del cliente que era el estándar anterior, pero me permitió hacer más cosas grandiosas en menos tiempo, abriendo un nuevo montón de problemas. Para todas las preguntas que planteo aquí, hay soluciones simples que se sienten como hacks o simplemente se sientenincorrecto. Prometo una recompensa de 300 puntos para una solución impresionante. Aquí va:

Cargando - Para nuestro caso de uso (un panel de administración) la sincronización pesimista es mala. Para algunas cosas, necesito validar las cosas en el servidor antes de aceptarlas. Comenzamos antes de que el evento 'sync' se fusionara en Backbone,

y usamos este pequeño código para imitar el evento de carga:

window.old_sync = Backbone.sync

# Add a loading event to backbone.sync
Backbone.sync = (method, model, options) ->
  old_sync(method, model, options)
  model.trigger("loading")

Genial. Funciona como se esperaba pero no se siente correcto. Vincularemos este evento a todas las vistas relevantes y mostraremos un ícono de carga hasta que recibamos un evento de éxito o error de ese modelo. ¿Hay una manera mejor, más sana, de hacer esto?

Ahora para los duros:

Demasiadas cosas se prestan demasiado. - Digamos que nuestra aplicación tiene pestañas. Cada pestaña controla una colección. En el lado izquierdo se obtiene la colección. Haz clic en un modelo para comenzar a editarlo en el centro. Cambia su nombre y presiona tabulador para ir al siguiente elemento del formulario. Ahora, su aplicación es un "algo en tiempo real" que nota la diferencia, ejecuta validaciones y sincroniza automáticamente el cambio al servidor, ¡no se requiere el botón de guardar! Genial, pero el H2 al inicio del formulario es el mismo nombre que en la entrada, debe actualizarlo. Ah, y necesitas actualizar el nombre de la lista al lado. ¡OH, y la lista se ordena por nombres!

Aquí hay otro ejemplo: desea crear un nuevo elemento en la colección. Presionas el botón "nuevo" y empiezas a llenar el formulario. ¿Usted agrega inmediatamente el artículo a la colección? ¿Pero qué pasa si decides descartarlo? ¿O si guardas toda la colección en otra pestaña? Y, hay una carga de archivo: debe guardar y sincronizar el modelo antes de poder comenzar a cargar el archivo (para poder adjuntar el archivo al modelo). Así que todo comienza a mostrarse tembloroso: guardas el modelo y la lista y el formulario se renderiza de nuevo, está sincronizado ahora, así que obtienes un nuevo botón de eliminación, y se muestra en la lista, pero ahora la carga del archivo terminó de cargarse, así que todo comienza a renderizar de nuevo.

Agrega subvistas a la mezcla y todo comienza a verse como una película de Fellini.

Es subvistas todo el camino hacia abajo - Aquí hay un buen artículo sobre estas cosas.. No pude, por amor a todo lo que es sagrado, encontrar una manera correcta de adjuntar complementos jQuery o eventos DOM a ninguna vista que tenga subvistas. El infierno sobreviene rápidamente. La información sobre herramientas oye que el renderizado se prolonga y comienza a volverse loco, las subvistas se vuelven como zombies o no responden. Estos son los principales puntos problemáticos, ya que los errores actuales están de pie, pero todavía no tengo una solución que abarque todo.

Parpadeo - El renderizado es rápido. De hecho, es tan rápido que parece que mi pantalla tuvo un ataque. A veces, las imágenes tienen que cargarse de nuevo (¡con otra llamada del servidor!), Por lo que el html se minimiza y luego se maximiza nuevamente de forma abrupta: una css width + height para ese elemento lo solucionará. a veces podemos resolver esto con un fadeIn y un fadeOut, que son un problema para escribir, ya que a veces reutilizamos una vista y otras la creamos de nuevo.

TL; DR - Estoy teniendo problemas con las vistas y subvistas en Backbone - Se renderiza demasiadas veces, parpadea cuando se renderiza, las subvistas separan mis eventos DOM y se comen mis cerebros.

¡Gracias!

Más detalles: BackboneJS con la gema Ruby on Rails. Plantillas que utilizan las plantillas de UnderscoreJS.