tomasAlabes/backbone.raphael

An easy way to add svg/vml views into your Backbone app

Backbone.raphael

An easy way to add svg/vml views into your Backbone app

This extension enables you to add views to your backbone apps tweaking how Backbone and RaphaelJS handle event bindings.

Quickstart guide

• Add backbone.raphael.js after Backbone and all it dependencies

<script type="text/javascript" src="raphael.js"></script>

<script type="text/javascript" src="jquery-2.0.1.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>


<script type="text/javascript" src="backbone.raphael.js"></script>


<script type="text/javascript" src="yourApp.js"></script>

• Use it in your app

var paper = Raphael("container", 300, 640);

// Usual backbone model
var CircleModel = Backbone.Model.extend();

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
        "click": "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")
        });
    }

});

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

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

For a more complex example see the sample app in this repo.

Thats it!

Copyright and license

Licensed under the MIT license.