Question

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

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

我开始这样做是为了解决我的范围问题

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

然而，这似乎很草率，特别是因为我移植的示例代码（http://www.createjs.com/#!/EaselJS/demos/drawing）具有嵌套级别的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);
    }

});

一个无关的问题，我应该在初始化函数中实例化我的变量吗？我还是Backbone的新手，并试图找出最佳实践。

Answer 1

Backbone需要Underscore库，我强烈建议您熟悉它：它有很多很棒的东西。特别是它有一个_.bind方法，您可以这样使用：

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

它还有一个相关的_.bindAll方法，可以使用它（通常在initialize函数内部）将对象的方法绑定到它，如下所示：

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

但是，你可以避免所有这些，如果你只是利用它的事件处理，让Backbone为你做绑定：

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

至于你在initialize内实例化变量的问题，答案是......可能，但是如果不知道你的具体情况就很难说。通常，initialize应该执行在创建Collection / Model / View时需要执行的任何操作，因此如果初始化变量属于那个，那么肯定。

骨干视图中的范围问题

1 个答案: