How to update view manually in Ember.js?

Question

I am using Ember.js in my application, but there is a point where I update a property of the view's context(controller) but right after the update there is a parser(MathJax) that looks at the dom for the updated fields to parse it into math. However even though the update is taking place, it happens after mathjax looks for the update. What I need to do is force ember to update the view or wait for ember to update before I tell mathjax to parse the html. Is there a way to achieve this?

Answer 1

This is a fairly common use-case. To specify code that should execute after a property's changes have propogated, use an observer. Ember triggers observers after it successfully propagates the change. For example:

App.MathView = Ember.View.extend({
  controller: null,
  template: Ember.Handlebars.compile("<div>{{myProperty}}</div>"),

  myPropertyDidChange: function() {
    // From here the controller value is changed but DOM has not been updated
    Ember.run.next(this, function() {
      // This code will run when after changes have propagated to the DOM 
      // Call MathJax parser here
      // If needed you can access the view's DOM element via this.$()
      alert("New property value is in dom: "+  this.$().text());
    });
  }.observes('controller.myProperty')
});

See the Ember Managing-Asynchrony Guide and API docs for Ember.run: http://emberjs.com/guides/understanding-ember/managing-asynchrony/ http://emberjs.com/api/classes/Ember.run.html#method_next