通过didInsertElement视图功能布局的时间问题

Question

我在didInsertElement（）中使用jQuery执行基于高度计算的布局的代码时遇到了丑陋的时序问题（竞争条件）。例如，我通过$('header.someClass').outerHeight(true);计算标题的高度，然后使用结果从顶部偏移内容区域。如果我通过重新加载整个页面来呈现全新的视图，它可以工作（在我的示例中为60px），但如果我从另一个页面导航到视图，它会失败，因为返回了错误的高度（在我示例中为6px）。为了证明这是一个时间问题：如果我将代码封装在： Em.run.later(function() { ...do layout }, 50); 它有效。我认为这是一个严重的问题，因为Ember中没有其他钩子，我可以连接到。

Answer 1

相反，您应该安排jQuery逻辑在渲染后运行：

App.YourView = Ember.View.extend({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, function(){
        // perform your jQuery logic here
    });
  }
});

在我的博客中找到更多的信息和解释。

Answer 2

听起来你可能对ember的工作方式有点误解。

didInsertElement是在该特定视图被注入到dom中时激发的，而不是在所有元素都在dom中时。注意：如果后面的模型发生了变化，ember将不会再次启动didInsertElement，因为它没有重新插入到dom中。

如果它在你延迟时起作用，那么听起来你计算某个东西大小的逻辑取决于可能还没有的东西。

请随意使用emberjs.jsbin.com.