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 接受回调作为第三个参数，您可以将其设置为绑定到您的视图的函数：

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 回答