Hi! Now:

Presenting backbone.raphael

You may already know the famous Backbone javascript library that lets you build an MV* architecture in the client. And perhaps you also know Raphael, that gives you the opportunity to abstract you from the browser you are using and let you work with SVG o VML indifferently.

In Backbone, the V was thought for html views, but with the flexibility that backbone offers and a little bit of ingenuity we can extend backbone and let your app embrace the vectorial images in your browser.

For this, I created/am creating a Backbone extension that easily lets you do that, called backbone.raphael. It is a simple tweak of how Backbone handles Views events, and how Raphael does it. How do I use it?

  1. Add backbone.raphael.js after backbone.js in your html
<script type="text/javascript" src="backbone.js"></script>

<!-- The extension  -->
<script type="text/javascript" src="backbone.raphael.js"></script>

This will enable you to use the new Backbone.RaphaelView 2. How to use it

First:

//Raphael root element
var paper = Raphael(0, 0, 300, 640);

// Usual backbone model, why change it if the View is the new thing?
var CircleModel = Backbone.Model.extend();
Now we create the view
//This view extends from Backbone.View
var CircleView = Backbone.RaphaelView.extend({

    initialize: function(){
        var model = this.model;
        this.listenTo(model, "change", this.render);

        // Create raphael element from the model
        var circle = paper.circle(model.get("x"), model.get("y"), model.get("radio")).attr({fill: model.get("color")});

        // Set the element of the view
        this.setElement(circle);
    },

    events: {
        // Any raphael event, no selector needed
        "click": "sayType",
        // Or any custom event
        "foo": "sayType"
    },

    sayType: function(evt){
        console.log(evt.type);
    },

    render: function(){
        var circle = this.el;
        var model = this.model;

        //When the model changes, so the element
        circle.attr({
            cx: model.get("x"),
            cy: model.get("y"),
            r: model.get("radio"),
            fill: model.get("color")
        });
    }

});

Now is time for creating some real objects:

var model = new CircleModel({
    x: 100,
    y: 150,
    radio: 50,
    color: "blue"
});

var view = new CircleView({
    model: model
});

Then in your app you can trigger the custom events you binded:

view.trigger("foo");

In my github repo it is the source code and a more complex sample app for you to see. This extension is still in development but is usable today.

Enjoy!

Blog Logo

Tomas Alabes

Passionate Software Engineer from Argentina living in Silicon Valley.


Published

Image

Tomas Alabes' Blog

My personal site's Blog

Back to Overview