Geek asks and answers

Avoid re-rendering images and other materials from highway views

when I re-view the view on the home page, what is a good way to skip re-displaying things like images and Google maps? My photo and map views tend to flicker very badly every time a view is re-displayed (which is pretty common). This is especially true for images, since the template engine composes the layout from scratch, which causes image tags to retrieve a bitmap image either from the server or from the cache again.

Of course, I still want the view to remain somehow agnostic of the layout, so technically he should not know that we are going to display the image, right?

+5
source share
2 answers

I am going to propose a solution that contradicts your assumption: "The view should be a template agnostic."

If you call render()at any time when something has changed in the Model, you will blink in your browser, especially if the template is large.

My recommendation is a separate renderview that occurs only once when the view is visualized and several helper methods updatethat are responsible for updating small fragments of the view associated with specific attributes of the model.

For instance:

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

, HTML , , , , , .

+1

More articles:


All Articles