Avoid re-rendering images and other stuff from backbone views

Question

when I rerender a backbone view, what is a good way to skip re-rendering things like images and google maps? My photo and map views tend to flicker really bad every time the vi

Answer 1

I'm gonna offer a solution that is in conflict with your assumption "the View should be agnostic of the template".

If you call render() any time anything has changed in the Model you will have this blinking in your browser, especially if the template is big.

My recommendation is separate the render of the View which happens only once when the View is first time visualized and several update helper methods which are in charge of updating small pieces of the View linked to concrete Model attributes.

For example:

// 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()
})

Answer 2

To get the best result you really don't want to re-render the HTML that contains your media so I would recommend using more targetted views for the content that changes so you don't need to re-render the views with content that doesn't.