Question

我正在开发一个Backbone应用程序，它可以呈现相同视图的多个实例。每个视图都有一个相当大的节点树，我可以看到用户代理无法立即呈现视图。

我遇到的问题是，当我的渲染回调触发时，高度将以0的形式出现，因为用户代理的渲染引擎实际上并未完成渲染整个视图。如果我设置了超时，则会输出正确的最终高度：

var ChildView = window.Backbone.View.extend({
   render: function() {
      var template = require('templates/ChildTemplate');
      this.$el.html(template());
      this.afterRender();
   },
   afterRender: function() {
      console.log(this.$el.outerHeight());  // 0
      var _this = this;
      setTimeout(function(){
         console.log(_this.$el.outerHeight()); // 51 (or some non-zero integer)
      }, 100);
      setTimeout(function(){
         console.log(_this.$el.outerHeight()); // 240, full correct height
      }, 300);
   }
});

如何解释此渲染引擎延迟？

架构：

jquery 1.7.2
backbone 0.9.9

Answer 1

如果模板包含图像，那么我建议您使用标准的jquery load函数

_this.$el.children('img').load(function(){
    //the element should exist now
});

否则我不确定是什么问题。我相当肯定Underscore的template功能是同步的，所以我不会怀疑那里有任何问题。从设计的角度来看，可能有用的一件事就是利用initialize

var ChildView = window.Backbone.View.extend({
   initialize: function(){
       var template = require('templates/ChildTemplate');
       this.renderedTemplate = template();

   },
   render: function() {
      this.$el.html(this.renderedTemplate);
      this.afterRender();
   },
});

如果您不想使用名称renderedTemplate，那就没关系，请确保不要将其命名为template，因为它已在使用中

渲染引擎延迟会影响javascript中的测量尺寸

1 个答案: