Question

我知道如何处理一般事件，例如点击等，但我有一个问题是要理解如何在我的渲染函数中监听函数触发的事件：

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

Answer 1

FreeTransform接受回调作为第三个参数，您可以将其设置为绑定到视图的函数：

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将使用此设置调用该视图

要对特定事件做出反应，您必须检查 events 数组是否包含相关值：

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/

Backbone听Raphael freeTransform的活动

1 个答案: