Loosing ember context in callback of third party library - ember.js

Question

I have the following code in my route for receiving webocket updates of my models. The problem is that when this line executes
setTimeout(self.stompConnect, 10000);
I no longer have access to the Ember.Route Ember object at the top of the stompConnect method.
var self = this; //no longer pointing to my route
How can I maintain the ember context across the callback in a third pary library like this? This has nothing to do with websockets or the library because I had the same issue with another third party library that had a callback.
I guess I need to use .bind() or something but I don't know the correct syntax.
stompClient : null,
activate : function() {
this.stompConnect();
},
stompConnect : function() {
var self = this;
var connectCallback = function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/models/update', function(payload){
var model = JSON.parse(JSON.parse(payload.body));
var modelName = Object.keys(model)[0];
var modelPayload = model[modelName];
self.store.push(modelName, modelPayload);
});
};
var errorCallback = function (error) {
console.log('STOMP: ' + error);
setTimeout(self.stompConnect, 10000); //when stompConnect() is called, the ember context is lost :(
console.log('STOMP: Reconecting in 10 seconds');
};
var url = ... ;
var socket = new SockJS(url);
var stompClient = Stomp.over(socket);
stompClient.connect({}, connectCallback, errorCallback);
this.set('stompClient', stompClient);
},
deactivate : function() {
this.get('stompClient').disconnect();
},

Answer 1

Basically you have a callback inside a callback. So context needs to be passed in both callbacks. self will work in errorCallBack but needs to be set again to work in stompConnect. I would rather suggest using run.later to setTimeOut. So Here goes the code.
stompClient : null,
activate : function() {
this.stompConnect();
},
stompConnect : function() {
var self = this;
var connectCallback = function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/models/update', function(payload){
var model = JSON.parse(JSON.parse(payload.body));
var modelName = Object.keys(model)[0];
var modelPayload = model[modelName];
self.store.push(modelName, modelPayload);
});
};
var errorCallback = function (error) {
console.log('STOMP: ' + error);
Ember.run.later(this, this.stompConnect, 1000);
//or you can also use
//setTimeout(this.stompConnect.bind(this), 10000); when stompConnect() is called, the ember context is lost :(
console.log('STOMP: Reconecting in 10 seconds');
};
var url = ... ;
var socket = new SockJS(url);
var stompClient = Stomp.over(socket);
stompClient.connect({}, connectCallback, errorCallback.bind(this));
this.set('stompClient', stompClient);
},
deactivate : function() {
this.get('stompClient').disconnect();
}
I prefer using .bind() rather var self = this;. But it depends.