Scoping issue in backbone view - backbone.js

Question

I am in the process of getting a simple drawing view created using Easeljs inside of a Backbonejs view. I am having an issue with scope, in my listener events, for example:
this.stage.addEventListener("stagemousedown", this.handleMouseDown);
I started to started doing this to get around my scope issue
var self = this;
this.stage.addEventListener("stagemousedown", function(){
var foo = self.bar;
});
However, this seems sloppy, especially since the sample code I am porting (http://www.createjs.com/#!/EaselJS/demos/drawing), has nested levels of eventListeners.
SketchView = Backbone.View.extend({
initialize: function(){
this.canvas;
this.stage;
this.drawingCanvas;
this.oldPt;
this.oldMidPt;
this.title;
this.color;
this.stroke;
this.colors;
this.index;
},
beforeRender : function (){
this.template = _.template( tpl.get(this.templateFile) );
},
render: function(eventName) {
$(this.el).html(this.template(this.model));
return this;
},
//add in UI
afterRender : function (){
this.createUI();
},
createUI: function() {
this.canvas = document.getElementById("demoCanvas");
this.index = 0;
this.colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
//Create a stage by getting a reference to the canvas
this.stage = new createjs.Stage(this.canvas);
this.stage.autoClear = false;
this.stage.enableDOMEvents(true);
createjs.Touch.enable(this.stage);
createjs.Ticker.setFPS(24);
this.stage.addEventListener("stagemousedown", this.handleMouseDown);
this.stage.addEventListener("stagemouseup", this.handleMouseUp);
this.title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
this.title.x = 300;
this.title.y = 200;
this.stage.addChild(this.title);
this.stage.addChild(this.drawingCanvas);
this.stage.update();
},
handleMouseDown: function (event) {
if (this.stage.contains(this.title)) { this.stage.clear(); this.stage.removeChild(this.title); }
this.color = this.colors[(this.index++)%this.colors.length];
this.stroke = Math.random()*30 + 10 | 0;
this.oldPt = new createjs.Point(this.stage.mouseX, this.stage.mouseY);
this.oldMidPt = this.oldPt;
this.stage.addEventListener("stagemousemove" , this.handleMouseMove);
},
handleMouseMove: function (event) {
var midPt = new createjs.Point(this.oldPt.x + this.stage.mouseX>>1, this.oldPt.y+this.stage.mouseY>>1);
this.drawingCanvas.graphics.clear().setStrokeStyle(this.stroke, 'round', 'round').beginStroke(this.color).moveTo(midPt.x, midPt.y).curveTo(this.oldPt.x, this.oldPt.y, this.oldMidPt.x, this.oldMidPt.y);
this.oldPt.x = this.stage.mouseX;
this.oldPt.y = this.stage.mouseY;
this.oldMidPt.x = midPt.x;
this.oldMidPt.y = midPt.y;
this.stage.update();
},
handleMouseUp: function (event) {
this.stage.removeEventListener("stagemousemove" , this.handleMouseMove);
}
});
An unrelated question, is should I be instantiating my variables in the initialize function? I am still new to Backbone, and trying to figure out best practices.

Answer 1

Backbone requires the Underscore library, and I strongly recommend becoming familiar with it : it has a lot of great stuff. In particular it has a _.bind method that you can use like so:
this.stage.addEventListener("stagemousedown", _(function(){
var foo = this.bar; // "this" will be correct now thanks to bind
}).bind(this);
It also has a related _.bindAll method, which can be used (often inside of an initialize function) to bind an object's methods to it, like so:
initialize: function() {
_(this).bindAll('handleMouseDown'); // handleMouseDown's this will be correct
this.stage.addEventListener("stagemousedown", this.handleMouseDown);
}
However, you can avoid all of this and let Backbone do the binding for you if you just take advantage of its event handling:
Backbone.View.extend({
events: {mousedown: 'handleMouseDown'}
handleMouseDown: function() {
// this will be bound correctly
As for your question about instantiating variables inside initialize, the answer is ... probably, but it's hard to say without knowing your specific context. In general, initialize should do anything that needs to happen when the Collection/Model/View gets created, so if initializing variables falls under that then sure.