2

クリックなどの一般的なイベントを処理する方法は知っていますが、レンダー関数で関数によって発生したイベントをリッスンする方法を理解するのに問題があります。 

function( ft, events) {
   console.log(events);
}); /*fires ["drag start"]
    ["drag"]
    ["apply"] 
    ["drag"] 
    ["apply"]
    ["drag"] 
    etc.*/

ここで、これらのイベントをリッスンするハンドラーをビューに配置したいと考えています。どうすればいいですか？

これは全体のビューです:

var myView = Backbone.View.extend({ 

    initialize: function () {
        self = this;
        this.element = paper.rect();
        this.setElement(this.element.node);
        this.delegateEvents(this.events);

    },
    events: { 
        "click": "showHandles",
            "drag end": "dragEndHandler"
    },

    dragEndHandler: function(e){ 
        console.log('dragEnd'); 

    },      

    showHandles: function(e){ 
      this.ft.showHandles();
    },

    render: function(){ 
        this.element.attr({ 
            'x': this.model.get('x'),
            'y': this.model.get('y'),
            'width': this.model.get('width'),
            'height': this.model.get('height'),
            'fill': this.model.get('fill'),
            'cursor': this.model.get('cursor')
        })
        // Add freeTransform with options and callback
        this.ft = paper.freeTransform(this.element, { 
                'keepRatio': ['axisX', 'axisY'],
                'size': 4,
                //set handle
                'attrs': {'fill': '#436eee', 'stroke': '#fff'}
                }, 
                function( ft, events) {
                    console.log(events);/*fires ["drag start"]
                                                        ["drag"]
                                                        ["apply"] 
                                                        ["drag"] 
                                                        ["apply"]
                                                        ["drag"] 
                                                        etc.*/
                });
        return this; 
    } 
});
4

1 に答える 1

2

FreeTransform は 3 番目の引数としてコールバックを受け入れます。ビューにバインドされた関数に設定できます。

var myView = Backbone.View.extend({

    initialize: function () {
        _.bindAll(this, 'transformed');
       // ...
    },

    transformed: function (ft, events) {
        console.log(this);
        console.log(events);
    },

    render: function (){
        // ...
        this.ft = paper.freeTransform(this.element, options, this.transformed);
        return this;
    }
    // ...
});

view.transformedのおかげで、このセットでビューに呼び出されます_.bindAll

特定のイベントに対応するには、イベント配列に関連する値が含まれているかどうかを確認する必要があります。

transformed: function (ft, events) {
    if (_.indexOf(events, "scale end")!==-1) {
        console.log("do something with scale end");
    }
},

デモについては、http://jsfiddle.net/nikoshr/BC2X3/を参照してください。

または、独自のイベント ルーティング メソッドを構築することもできます。

transformed: function (ft, events) {
    var i = 0, l = events.length, ev;
    for (; i<l; i++) {
        ev = 'transformed_' + events[i].replace(' ', '_');
        if (this[ev])
            this[ev](ft);
    }
},

transformed_scale_end: function() {
    console.log("do something with scale end");
},
transformed_rotate_end: function() {
    console.log("do something with rotate end");
},

更新されたデモについては、http://jsfiddle.net/nikoshr/BC2X3/1/を参照してください。

于 2013-02-21T15:22:40.530 に答える