javascript - template - github backbone

Backbone change model of View

Question

Soy bastante nuevo en Backbone y tengo la siguiente pregunta:

Tengo una colección de modelos.

Tengo una vista de colección que muestra pestañas (con una vista para cada modelo en la colección).

Tengo una vista para un modelo (para el contenido).

Tengo un enrutador con rutas.

Lo que intento lograr es una funcionalidad como http://jqueryui.com/demos/tabs/

Hago clic en una pestaña (modelo de colección) y luego quiero pasar el modelo a la vista de contenido, tal vez cambiarlo y reflejar los cambios en la colección.

Se me ocurrió cuatro soluciones:

En el enrutador:

''switchCommunity'': function(id) {
// (a) set new model attributes
this.view.community.model.set(communities.get(id));
// (b) replace model
this.view.community.model = communities.get(id);
// (c) a custom function of the view changes its model
this.view.community.changeModel(communities.get(id));
// (d) a new view
this.view.community = new View({
model: communities.get(id)
})
}

El problema aquí es

• (a) no refleja los cambios en el modelo de la colección

• (b) no desencadena (cambia) eventos, porque el enlace en la función de inicialización de la vista nunca se desencadena, porque es un modelo completamente nuevo

• (c) parece un truco para mí

• (d) cada vez que hago clic en una pestaña, se crea una nueva vista (¿es esto un problema de rendimiento?)

¿Cuál es la mejor práctica aquí?

Answer 1

¿Por qué crees que (c) es un truco? Parece un buen lugar para encapsular la desvinculación del modelo anterior y conectar el nuevo.

Answer 2

El complemento Backbone.Marionette proporciona una solución optimizada para su problema.

Proporciona funcionalidad para la inicialización de aplicaciones, la administración de vistas y la agregación de eventos.

En esencia, quita el dolor de la clandestinidad y muestra múltiples puntos de vista.

Puede leer esta publicación de blog para obtener más información al respecto.

Answer 3

La respuesta corta es que debes usar d. Sí, no está funcionando, pero a menos que note desaceleración en la interfaz de usuario, no debe preocuparse demasiado. Debe codificar algo que 1. siempre funciona 2. No requiere mucho tiempo para codificar, de modo que puede pasar a codificar otras funciones más importantes.

Si / cuando necesita más rendimiento, puede tomarse más tiempo para hacer c. Para ser el mejor rendimiento, no debe destruir y volver a hacer plantillas. Debería usar jquery para encontrar manualmente los elementos en el DOM y reemplazarlos con el nuevo modelo. Cuando usted llama:

view.$el = _.template(string, model);

Es muy poco código pero mucho trabajo para el navegador. Reemplazar el DOM con un nuevo modelo es mucho más eficiente.

Si necesita ser más eficiente, puede usar la agrupación de objetos. He estado trabajando en un PerfView para la red troncal que implementa muchas optimizaciones. https://github.com/puppybits/BackboneJS-PerfView Hay comentarios en el código con muchas prácticas recomendadas para mantener el mejor rendimiento del navegador.

Answer 4

Una de tus soluciones está cerca de estar bien: D

Esto es lo que quieres:

this.view.community.model.set(communities.get(id).toJSON());

Y esto activará model.on ("change") también.