https://github.com/tomasalabes/backbone.raphael
An easy way to add svg/vml views into your Backbone app
https://github.com/tomasalabes/backbone.raphael
backbonejs raphaeljs
Last synced: 20 days ago
JSON representation
An easy way to add svg/vml views into your Backbone app
- Host: GitHub
- URL: https://github.com/tomasalabes/backbone.raphael
- Owner: tomasAlabes
- License: mit
- Created: 2013-05-25T23:27:18.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2016-02-09T03:02:40.000Z (about 10 years ago)
- Last Synced: 2026-02-10T21:33:35.102Z (about 1 month ago)
- Topics: backbonejs, raphaeljs
- Language: JavaScript
- Size: 188 KB
- Stars: 55
- Watchers: 3
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.markdown
- License: license.txt
Awesome Lists containing this project
README
# 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
```html
```
* Use it in your app
```js
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.