1

我正在开发一个呈现同一视图的多个实例的 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
  • 骨干 0.9.9
4

1 回答 1

1

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

_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，因为它已经在使用中

于 2013-08-03T12:26:23.030 回答