javascript - Avoid re-rendering images and other stuff from backbone views - Stack Overflow

admin管理员组

文章数量:1323348

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 view is re-rendered (which is quite often). With the images especially, it is the case that the templating engine is laying out the layout from scratch, which causes the image tags to fetch the bitmap either from the server or from the cache once again.

Of course, I still want the view to remain kind of agnostic of the layout, so technically it shouldn't know that we are going to display an image, right?

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 view is re-rendered (which is quite often). With the images especially, it is the case that the templating engine is laying out the layout from scratch, which causes the image tags to fetch the bitmap either from the server or from the cache once again.

Of course, I still want the view to remain kind of agnostic of the layout, so technically it shouldn't know that we are going to display an image, right?

• javascript
• backbone.js

Share Improve this question Follow asked Jun 13, 2012 at 8:39 Preslav RachevPreslav Rachev 4,00366 gold badges4242 silver badges7272 bronze badges 4

• depends on how you are rendering the images? Are you using handlebars or just inserting them as text? – jakee Commented Jun 13, 2012 at 8:43
• I am using mustache at this point, and simply insert the urls from the data model. I was thinking of jumping to handlebars at some point. Will this help? – Preslav Rachev Commented Jun 13, 2012 at 8:48
• Do you always re-pile your template? – jakee Commented Jun 13, 2012 at 8:52
• I have similar problems. I am using Handlebars and only pile the template once. Whenever I re-render a template, the images flicker (no matter whether they are fetched from server or browser cache). It's quite annoying and the only workaround I found so far was to really only update the text parts that changed. – mbuchetics Commented Jun 13, 2012 at 9:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

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

本文标签： javascriptAvoid rerendering images and other stuff from backbone viewsStack Overflow