避免从骨干视图中重新渲染图像和其他内容

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 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?

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

为了获得最佳结果，您实际上不希望重新呈现包含媒体的HTML，因此我建议对更改的内容使用更多目标视图，这样您就不需要使用不包含内容的内容重新呈现视图“T。