2012-06-13 12 views
5

cuando publico una vista de red troncal, ¿cuál es una buena manera de omitir la recreación de elementos como imágenes y mapas de Google? Mis vistas de fotos y mapas tienden a parpadear realmente mal cada vez que se vuelve a renderizar la vista (lo cual es muy frecuente). Con las imágenes especialmente, es el caso de que el motor de plantillas está diseñando el diseño desde cero, lo que hace que las etiquetas de imagen recuperen el mapa de bits ya sea desde el servidor o desde la memoria caché una vez más.Evite volver a representar imágenes y otras cosas desde las vistas de red troncal

Por supuesto, todavía quiero que la vista siga siendo un poco agnóstica del diseño, por lo que técnicamente no debería saber que vamos a mostrar una imagen, ¿verdad?

+0

depende de cómo se renderiza las imágenes? ¿Estás usando manubrios o simplemente insertándolos como texto? – jakee

+0

Estoy usando bigote en este punto, y simplemente inserte las URL del modelo de datos. Estaba pensando en saltar al manubrio en algún momento. ¿Ayudará esto? – preslavrachev

+0

¿Siempre vuelve a compilar su plantilla? – jakee

Respuesta

9

Voy a ofrecer una solución que está en conflicto con su suposición "la Vista debe ser independiente de la plantilla".

Si llama render() cualquier momento nada ha cambiado en el modelo que tendrá esta parpadeando en su navegador, en especial si la plantillaes grande.

Mi recomendación es separar el render de la Vista que ocurre una sola vez cuando la Vista es visualizada por primera vez y varios update métodos auxiliares que están a cargo de actualizar pequeñas piezas de la Vista vinculadas a atributos concretos del Modelo.

Por ejemplo:

// code simplified and not tested 
var MyView = Backbone.View.extend({ 
    initialize: function(){ 
    this.model.on("change:title", this.updateTitle, this); 
    this.model.on("change:description", this.updateDescription, this); 
    // ... more change:XXX 
    }, 

    render: function(){ 
    this.$el.html(this.template(this.model.toJSON())); 
    }, 

    updateTitle: function(){ 
    this.$el.find(".title").html(this.model.get("title")); 
    }, 

    updateDescription: function(){ 
    this.$el.find(".description").html(this.model.get("description")); 
    }, 

    // ... more updateXXX() 
}) 
+1

eso es verdad, y he seguido este enfoque durante bastante tiempo ... pero cada vez más comencé a ver a los grandes nombres de la comunidad JS aconsejar una clara separación de preocupaciones ... aunque técnicamente el uso de plantillas en JS es todavía un poco defectuoso – preslavrachev

+0

@ user1107412 siempre hay una tensión constante entre _patterns_ y _pragmatism_ :) (Pragmatismo: _un enfoque que evalúa teorías o creencias en términos del éxito de su aplicación práctica_ Oxford English Dictionary). – fguillen

+1

@ user1107412: Podría dividir la vista en una subvistas y luego dejar que las pequeñas subvistas se actualicen según sea necesario. Eso probablemente sería inútilmente pedante a menos que una vista ya fuera demasiado complicada. –

1

Para obtener el mejor resultado, realmente no desea volver a procesar el código HTML que contiene sus medios, por lo que le recomendaría utilizar más vistas para el contenido que cambia, por lo que no es necesario volver a representar las vistas con contenido que no.

Cuestiones relacionadas