backbone.js & raphäel.js / Backbone View <-> Raphäel Object

Question

And now, for something complete different.

How can I delegate events in a backbone view when the "dom" object is a raphäel object. Does that work at all? Like this:

var NodeView = Backbone.View.extend({ 
                events: { 
                        "click": "click" 
                }, 
                click: function(){ 
                        alert('clicked') 
                }, 
                render: function(){ 
                        canvas.rect(this.model.get('xPos'), this.model.get('yPos'), 50, 50).attr({ 
                            fill: "#EEEEEE", 
                            stroke: "none", 
                            cursor: "move" 
                        }); 
                        return this; 
                } 

    }); 

I need to update the model when the raphäel object changed position. When I attach the event direcly to the raphäel object I only have access to that and not the whole view and thus not to the model.

Answer 1

Another way to do this is to manually override the this.el property in the view constructor/initializer using the new View.setElement method with a reference to Raphael's Element.node like this:

var NodeView = Backbone.View.extend({ 
    initialize: function (args) {

        // create an empty reference to a Raphael rect element
        this.element = canvas.rect();

        // // overwrite the default this.el by pointing to the DOM object in
        // // Raphael. This works for older version of backbone.js
        // this.el = this.element.node;

        // in backbone 0.9.0+, you are not supposed to override the DOM object 
        // directly. rather, use the new setElement method which also takes 
        // care of the cached this.$el jquery object.
        this.setElement(this.element.node);

        // now that we have overwritten the default this.el DOM object, 
        // we need to rebind the events
        this.delegateEvents(this.events);
    },
    events: { 
        "click": "click" 
    }, 
    click: function(){ 
        alert('clicked');
    }, 
    render: function(){ 
        this.element.attr({ 
            x: this.model.get('xPos'),
            y: this.model.get('yPos'),
            width: 50,
            height: 50,
            fill: "#EEEEEE", 
            stroke: "none", 
            cursor: "move" 
        }); 
        return this; 
    } 
}); 

The advantage here is that you only need to edit the DOM in one place (in the render function) and you can still leverage Backbone.js's excellent event handling. I was able to get a similar solution to work for me with Raphael 2.0. Although I'm a little late to the party, I thought I would post this so that it might help someone else!

Answer 2

It should work if you are really using DOM element. E.g. if you have a Raphael object circle, then the DOM element would be circle.node. That one you need to pass as "el" property in the options or make sure that View's this.el is actually Raphael object's "node" property.

If you want to bind event manually and want to be able to access the view in the event handler, use Underscore's bind function:

$(circle.node).click(_.bind(someHandlerFunction, this));

where this should point to the view object in current context. In that case, inside someHandlerFunction, this object would be the view.

Answer 3

Check this: https://github.com/tomasAlabes/backbone.raphael

I tried to isolate this case making an extension.