CODEWITHSUNDEEP
jqueryember.js
RedBass
RedBass

Reputation: 328

Ember event rendering property in dom

I have a standard Ember view with a template.

Template:

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

View:

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

I want to get the dimension of container div, using JQuery using descriptionChanged observer.

The problem is that description value is asynchronous and is updated before the rendering of the page.

There is an event that is raised on specific property in a template is re-rendered in DOM?

Upvotes: 1

Views: 426

Answers (2)

chopper
chopper

Reputation: 6709

Use the didInsertElement method of your view:

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

Upvotes: 0

ahaurw01
ahaurw01

Reputation: 1202

Inside of your observer, interact with the DOM inside of a call to Ember.run.scheduleOnce().

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

This ensures that the given code runs after the render queue has been flushed, and further that it will only run once if you happen to update description multiple times in the current run loop:

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

Upvotes: 1

Related Questions