Ember JS and jquery-ui scope of callbacks - jquery-ui

Question

I'm using latest ember js and have the following view:
App.PeriodSelectorView = Em.View.extend
classNames: "period-selector"
templateName: "period_selector"
didInsertElement: ->
#$().draggable()
#setupTimeSlider()
setupTimeSlider: ->
#$(".time-slider").slider
value: 20
min: 20 # 0500 in the morning
max: 83 # 2045 in the evening
step: 1
slide: #updateTimeValue
updateTimeValue: (event, ui) ->
#set("time", ui.value)
Now when the slider is changed the callback fires, but this is set to window instead of the view instance. So calling this.set fails.
I already tried binding the method updateTimeValue to the instance using coffeescript's fat arrow (=>) operator, but it doesn't work.
How to get this point to the view instance instead of window?

Answer 1

Problem
I am not a coffeescript expert, but in my tests, it seems that using the => operator. Generate the _this = this, in the parent function scope. For example:
Using:
App = Ember.Application.create()
App.PeriodSelectorView = Em.View.extend
...
updateTimeValue: (event, ui) =>
#set("time", ui.value)
Generates the following:
var App,
_this = this;
App = Ember.Application.create();
App.PeriodSelectorView = Em.View.extend({
...
updateTimeValue: function(event, ui) {
// _this here is window object, this isn't what you want
return _this.set("time", ui.value);
}
});
Solution 1
Following this logic using an anonymous function you will get the expected result:
Updating to the following:
App = Ember.Application.create()
App.PeriodSelectorView = Em.View.extend
...
setupTimeSlider: ->
#$(".time-slider").slider
value: 20
min: 20 # 0500 in the morning
max: 83 # 2045 in the evening
step: 1
slide: (event, ui) => #slide now is an anonymous function
#set("time", ui.value)
Generates:
var App;
App = Ember.Application.create();
App.PeriodSelectorView = Em.View.extend({
...
setupTimeSlider: function() {
// now _this is the view context
var _this = this;
return this.$(".time-slider").slider({
value: 20,
min: 20,
max: 83,
step: 1,
slide: function(event, ui) {
// this will work
return _this.set("time", ui.value);
}
});
}
});
Solution 2
If you want to keep the name of the function, and the function declarion in the same place. You can use the jQuery.proxy:
App = Ember.Application.create
App.PeriodSelectorView = Em.View.extend
...
setupTimeSlider: ->
#$(".time-slider").slider
value: 20
min: 20 # 0500 in the morning
max: 83 # 2045 in the evening
step: 1
slide: Ember.$.proxy #updateTimeValue, #
updateTimeValue: (event, ui) ->
#set("time", ui.value)
I hope it helps