javascript - 避免从主干 View 重新渲染图像和其他内容

Question

当我重新渲染主干 View 时，跳过重新渲染图像和谷歌地图等内容的好方法是什么？每次重新渲染 View 时(这很常见)，我的照片和 map View 往往会非常糟糕地闪烁。尤其是图像，模板引擎从头开始布局，这导致图像标签再次从服务器或缓存中获取位图。

当然，我仍然希望 View 对布局保持某种不可知论，所以从技术上讲它不应该知道我们要显示图像，对吧？

Answer 1

我将提供一个与您的假设“View should be agnostic of the template”冲突的解决方案。

如果您在模型中发生任何更改时调用 render()，您的浏览器中将会闪烁，尤其是模板 很大。

我的建议是将 View 的 render 分开，它只在 View 第一次可视化时发生一次，还有几个 update 辅助方法负责更新小块链接到具体模型属性的 View 。

例如:

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