Backbone.js 主干视图中的范围界定问题

我正在使用Backbonejs视图中的Easeljs创建一个简单的工程视图。我在侦听器事件中遇到范围问题，例如：

this.stage.addEventListener("stagemousedown", this.handleMouseDown);

我开始这样做是为了回避我的范围问题

var self = this;
this.stage.addEventListener("stagemousedown", function(){
    var foo = self.bar;
});

然而，这似乎有些草率，特别是因为我移植的示例代码（）具有嵌套级别的EventListener

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);
    }

});

---

一个不相关的问题是，我应该在initialize函数中实例化我的变量吗？我对主干网还是新手，正在努力找出最佳实践。

主干网需要下划线库，我强烈建议您熟悉它：它有很多很棒的东西。特别是它有一个

.bind

方法，您可以这样使用：

this.stage.addEventListener("stagemousedown", _(function(){
    var foo = this.bar; // "this" will be correct now thanks to bind
}).bind(this);

它还有一个相关的

.bindAll

方法，可以使用该方法（通常在

初始化

函数中）将对象的方法绑定到它，如下所示：

initialize: function() {
    _(this).bindAll('handleMouseDown'); // handleMouseDown's this will be correct
    this.stage.addEventListener("stagemousedown", this.handleMouseDown);
}

但是，如果您只是利用主干网的事件处理功能，则可以避免所有这一切，并让主干网为您进行绑定：

Backbone.View.extend({
    events: {mousedown: 'handleMouseDown'}
    handleMouseDown: function() {
        // this will be bound correctly

---

关于在

初始化
中实例化变量的问题，答案是。。。可能吧，但如果不知道你的具体情况，很难说。一般来说，
initialize
应该执行创建集合/模型/视图时需要执行的任何操作，因此如果初始化变量在该范围内，那么请确保。
我通常只执行以下模式：
this.stage.addEventListener（“stagemousedown”、uu.bind（this.handleMouseDown，this））
使用下划线的绑定：唯一的问题是它将用视图的上下文替换侦听器的上下文。