当我重新渲染主干视图时,跳过重新渲染图像和谷歌地图等内容的好方法是什么?每次重新渲染视图时(这很常见),我的照片和地图视图往往会闪烁非常糟糕。尤其是图像,模板引擎从头开始布局布局,这导致图像标签再次从服务器或缓存中获取位图。
当然,我仍然希望视图保持与布局无关,所以从技术上讲,它不应该知道我们要显示图像,对吧?
当我重新渲染主干视图时,跳过重新渲染图像和谷歌地图等内容的好方法是什么?每次重新渲染视图时(这很常见),我的照片和地图视图往往会闪烁非常糟糕。尤其是图像,模板引擎从头开始布局布局,这导致图像标签再次从服务器或缓存中获取位图。
当然,我仍然希望视图保持与布局无关,所以从技术上讲,它不应该知道我们要显示图像,对吧?
我将提供一个与您的假设“视图应该与模板无关”相冲突的解决方案。
如果您render()
在模型中有任何更改的任何时候调用,您的浏览器中都会闪烁,尤其是在模板很大的情况下。
我的建议是将render
View 与第一次可视化 View 时仅发生一次的 View 分开,以及几个update
负责更新链接到具体 Model 属性的 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()
})
为了获得最佳结果,您真的不想重新渲染包含媒体的 HTML,因此我建议对更改的内容使用更有针对性的视图,这样您就不需要重新渲染具有不变化的内容的视图不。