¿Cómo evito que las imágenes parpadeen cuando renderizo la vista Backbone?

Question

Estoy usando Backbone.js como marco y, en mi opinión, tengo algunas imágenes pequeñas (una papelera para eliminar, un ícono, etc.). Y cuando la vista vuelve a mostrar, estas imágenes parpadean.

He resuelto esto con imágenes más grandes al crear una nueva vista para todo lo que no deseo flashear, y no haberlas disparado. Pero me preguntaba si hay otra forma de hacerlo sin dividir mi punto de vista en un montón de piezas.

Este es el formato general estoy renderizado mis puntos de vista en:

window.SomeView = Backbone.View.extend({ 
    initialize: function() {     
     this.model.bind('change', this.render, this); 
     this.template = _.template($('#view-template').html()); 
    }, 
    render: function(){ 
     var renderedContent = this.template(this.model.toJSON()); 
     $(this.el).html(renderedContent); 
     return this; 
    }, 
    events: { 'click .delete' : delete }, 
    delete: function(ev){ 
     //do delete stuff here 
    }, 

}); 

Y entonces yo les atribuyo a un div por:

var newView = new PopupItemImgView({model: someModel}); 
     $('#styleimage').append(newView.render().el); 

Mi plantilla podría parecerse a

<script type="text/template" id="view-template"> 
<% 
    print('Content content - <img src="images/delete.gif" class="delete">'); 
%> 
</script> 

Answer 1

En lugar de vincular el evento change a su método render, puede vincular change a una función onChange. Luego, dentro del controlador onChange, puede averiguar exactamente qué necesita actualizarse y dejar todo lo demás tal como está.

Utilicé este enfoque cuando construyo una vista para una colección: no quería que toda la lista se renderizara cuando cambiaba un solo elemento. En su lugar, presenté una vez cuando el elemento se insertó por primera vez, y luego manejé eventos de cambio específicos según sea necesario.