How to manually update a view in Ember.js?

Question

I use Ember.js in my application, but there is a moment when I update the presentation context property (controller), but right after the update there is a parser (MathJax) that looks at dom for the updated field for its analysis in mathematics. However, despite the fact that the update is taking place, this happens after mathjax searches for the update. I need to do this to get ember to update the view or wait for ember to update before I tell mathjax to parse the html. Is there any way to achieve this?

Answer 1

This is a fairly common use case. Use the observer to specify the code that should be executed after making changes to the properties. Ember calls observers after the change is successfully propagated. 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 DOM element via this.$() alert("New property value is in dom: "+ this.$().text()); }); }.observes('controller.myProperty') }); 

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