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')
}),

我希望使用带有descriptionChanged观察者的JQuery来获取容器 div的维度。

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

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

Answer 1

在观察者的内部，与Ember.run.scheduleOnce()的调用内的DOM进行交互。

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'));
  }
}),

dom中的Ember事件呈现属性

2 个答案: