0

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を初めて使用し、ベストプラクティスを理解しようとしています。

4

1 に答える 1

2

バックボーンにはアンダースコアライブラリが必要です。バックボーンに精通することを強くお勧めします。バックボーンには多くの優れた機能があります。特に、次の_.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に、コレクション/モデル/ビューが作成されたときに発生する必要があることはすべて実行する必要があるため、変数の初期化がそれに該当する場合は必ず実行してください。

于 2013-03-15T05:33:45.097 に答える