2011-12-21 17 views
26

Soy bastante nuevo en Backbone y tengo la siguiente pregunta:Backbone cambio modelo de Ver

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 estoy tratando de 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 cambiar y reflejar los cambios en la colección .

me ocurrió con cuatro soluciones:

En el router:

'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 cambios en el modelo de la colección

  • (b) no se activa (modifica) eventos, debido a que la unen en la función inicialización de la vista no se dispara, ya que es un completamente nuevo modelo

  • (c) parece un truco para mí

  • (d) cada vez que haga clic en una pestaña se crea una nueva vista (se trata de una cuestión rendimiento?)

¿Cuál es la mejor pratice aquí?

+2

Lo intentaría (d): esto no se convierte en un problema de rendimiento si primero quita la vista anterior. – swatkins

+0

en (d) Sobreescribo mi this.view.community ¿es suficiente o tengo que eliminarlo manualmente? – Riebel

+1

Esto debería ser suficiente, siempre y cuando los viejos elementos dom no se encuentren alrededor y tengan receptores de eventos atados a ellos, deberían ser recolectados. Verificaría con Firebug, pero creo que es correcto. – swatkins

Respuesta

15

Uno de su solución está cerca de estar bien: D

Aquí es lo que quiere:

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

y esto va a desencadenar model.on ("cambio") también.

+0

'communities.get (id) .attributes' también funciona y se ve más limpio para mí. –

1

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 vistas.

Puede leer esto blog post para obtener más información al respecto.

+0

Absolutamente, pero tenga en cuenta que el complemento es bastante nuevo y podría cambiar algunas veces en un futuro no muy lejano – Sander

8

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

0

La respuesta corta es que debe 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 necesita más rendimiento, puede tomar el tiempo extra 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 llamas:

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.

Cuestiones relacionadas