How do I keep images from flashing when rendering Backbone view?

Question

I'm using Backbone.js as a framework, and in my view I have a few small images (a trash can to delete, an icon, etc.). And when the view re-renders these images flash.

I have solved this with larger images by creating a new view for everything I don't want to flash - and not triggering them to render. But I was wondering if there is another way to do this without breaking up my view into a bunch of pieces?

This is the general format I am rendering my views in:

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
    },

});

And then I attach them to a div by:

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

My template might look like

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

Answer 1

Instead of binding the change event to your render method, you might bind change to an onChange function. Then, within the onChange handler, you could figure out exactly what needs to be updated, and leave everything else as-is.

I used this approach when I build a view for a collection: I didn't want the whole list to re-render when a single element changed. Instead, I rendered once when the element was first inserted, and then handled specific change events as necessary.