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

Avoid re-rendering images and other stuff from backbone views

本文关键字：图像 新渲染 其他 视图      更新时间：2023-09-26

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

当然，我仍然希望视图与布局无关，所以从技术上讲，它不应该知道我们将要显示图像，对吧？

我将提供一个与您的假设"视图应该与模板无关"相冲突的解决方案。

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

我的建议是将视图的render分开，该仅在视图首次可视化时发生一次，并且几个update辅助方法负责更新链接到具体模型属性的视图的小块。

例如：

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

为了获得最佳结果，您真的不想重新呈现包含媒体的 HTML，因此我建议对更改的内容使用更有针对性的视图，这样您就不需要使用不包含的内容重新呈现视图。

相关文章：