Why should I use Ember.run() when handling events in other libraries? - ember.js

Question

Looking at the Ember.js documentation, it is rather vague about when to make use of Ember.run() (my emphasis).
Normally you should not need to invoke this method yourself. However if you are implementing raw event handlers when interfacing with other libraries or plugins, you should probably wrap all of your code inside this call.
From looking through the source and reading posts on this topic, my understanding is that when you call Ember.run(), the following occurs.
The given callback is immediately run.
The run loop algorithm is executed, flushing all queues and thus ensuring bindings are synchronized, etc.
I'm trying to understand why it would be recommended to handle other libraries' events inside of a call to Ember.run(). Take the following example where I create a jQuery UI slider and handle the slide event.
<script type="text/x-handlebars" data-template-name="index">
<div id="slider"></div>
<h2>{{value}}</h2>
<h3>{{valueProse}}</h3>
</script>
App = Ember.Application.create();
App.IndexController = Ember.Controller.extend({
actions: {
valueChange: function (newValue) {
this.set('value', newValue);
}
},
valueProse: function () {
var value = this.get('value');
if (Ember.isNone(value)) {
return '';
}
if (value <= 25) {
return 'pretty small';
}
if (value <= 50) {
return 'getting bigger';
}
if (value <= 75) {
return 'whoa watch out';
}
if (value < 100) {
return 'can\'t handle it!';
}
return 'ahhhgghuarghblarp!';
}.property('value')
});
App.IndexView = Ember.View.extend({
didInsertElement: function () {
var controller = this.get('controller')
this.$('#slider').slider({
min: 0,
max: 100,
slide: function (event, ui) {
// Ember.run(function () {
controller.send('valueChange', ui.value);
// });
}
});
}
});
Here is a working fiddle: http://jsfiddle.net/ahaurw01/Kwze5/2/
Whether or not the slide event is handled inside of a call to Ember.run(), the expected behavior occurs. I'd like to understand what optimizations or insurance this offers. Either way, I see that value is getting set and valueProse is updated appropriately. Is this one of the cases the documentation is talking about when suggesting my code be wrapped in Ember.run()?

Answer 1

I believe the idea of running Ember.run is so that anything async events, such as event listeners from 3rd party libraries, can be synced up with the ember run loop.
I learned a ton about Ember.run and why it's useful when I started integrating QUnit into my project, because when you start testing your app, the automatic ember.run loop feature code is taken out and it's all up to you.