An easy way to add svg/vml views into your Backbone app
JavaScript Other
Latest commit 50c39f4 Feb 9, 2016 @tomasAlabes Update README.markdown
Failed to load latest commit information.
sample fix sample page js src error Oct 9, 2013
.gitignore Initial commit May 25, 2013
README.markdown Update README.markdown Feb 9, 2016
backbone.raphael.js Compound View Sample May 27, 2013
bower.json bower.json Jun 2, 2013
license.txt Initial commit May 25, 2013
package.json package.json Jun 2, 2013

README.markdown

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.