避免骨干观点重新渲染图像和其他的东西 [英] Avoid re-rendering images and other stuff from backbone views

问题描述

当我重新解析骨干看来，什么是跳过重新渲染之类的图像和谷歌地图的好方法？我的照片和地图的意见往往非常糟糕的视图被重新呈现每次（这是相当常见）闪烁。用特别的图像，它是该模板引擎被布置从头的布局，这使得图像标签无论是从服务器或从缓存再次取位图的情况。

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?

推荐答案

我要提供一个解决方案，在冲突与你的假设的的观点应该是不可知的模板的

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.

我的建议是独立的渲染这恰好只有当视图是第一次显现，一旦观几个更新 helper方法这是负责更新小块连接到具体的模型视图的属性。

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.

例如：

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

这篇关于避免骨干观点重新渲染图像和其他的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！