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

时间:2012-06-13 08:39:52

标签: javascript backbone.js

当我重新渲染骨干视图时,跳过重新渲染图像和谷歌地图之类的东西的好方法是什么?每次重新渲染视图时,我的照片和地图视图都会变得非常糟糕(这种情况经常发生)。特别是图像,模板引擎从头开始布局布局,这会导致图像标签再次从服务器或缓存中获取位图。

当然,我仍然希望视图对布局保持一定的不可知性,所以在技术上它不应该知道我们要显示图像,对吗?

2 个答案:

答案 0 :(得分:9)

我将提供一个与您的假设相冲突的解决方案“View应该与模板无关”

如果您在模型中发生任何更改时调用render(),您的浏览器中会显示闪烁,尤其是模板很大时。< / p>

我的推荐是将视图的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()
})

答案 1 :(得分:1)

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