jquery - dom中的Ember事件渲染属性

Question

我有一个带有模板的标准 Ember 视图。

模板：

<script type="text/html" data-template-name="template">
  <div id="container">
    <p>{{{view.description}}}</p>
  </div>
</script>

看法：

Em.View.extend({
  templateName: 'OutlookSnapshotInformationTemplate',
  description : "Loooooong text...",
  descriptionChanged : function(){
    $('container').height()
    [...]
  }.observes('description')
}),

我想使用 JQuery 使用 descriptionChanged 观察者来获取容器div 的维度。

问题是描述值是异步的，并且在页面呈现之前更新。

模板中的特定属性引发的事件在 DOM 中重新呈现？

Answer 1

在您的观察者内部，与调用Ember.run.scheduleOnce().

http://emberjs.com/api/classes/Ember.run.html#method_scheduleOnce

这确保了给定的代码在渲染队列被刷新后运行，并且如果你碰巧在当前运行循环中多次更新描述，它只会运行一次：

Ember.run.scheduleOnce('afterRender', this, function () {
  var height = this.$('#container').height();
  // ...
  // profit!
});

Answer 2

使用didInsertElement您的视图的方法：

App.YourView = Em.View.extend({
  templateName: 'OutlookSnapshotInformationTemplate',
  description : "Loooooong text...",
  didInsertElement: function() {
    this.set('containerHeight', this.$('#container').height());
    console.log(this.get('containerHeight'));
  }
}),