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?
- 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
- 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!