{"id":45321122,"url":"https://github.com/tomasalabes/backbone.raphael","last_synced_at":"2026-02-21T08:01:30.608Z","repository":{"id":8642109,"uuid":"10291204","full_name":"tomasAlabes/backbone.raphael","owner":"tomasAlabes","description":"An easy way to add svg/vml views into your Backbone app","archived":false,"fork":false,"pushed_at":"2016-02-09T03:02:40.000Z","size":192,"stargazers_count":55,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-02-10T21:33:35.102Z","etag":null,"topics":["backbonejs","raphaeljs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomasAlabes.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-25T23:27:18.000Z","updated_at":"2022-01-23T11:28:24.000Z","dependencies_parsed_at":"2022-08-22T10:00:37.078Z","dependency_job_id":null,"html_url":"https://github.com/tomasAlabes/backbone.raphael","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tomasAlabes/backbone.raphael","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasAlabes%2Fbackbone.raphael","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasAlabes%2Fbackbone.raphael/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasAlabes%2Fbackbone.raphael/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasAlabes%2Fbackbone.raphael/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomasAlabes","download_url":"https://codeload.github.com/tomasAlabes/backbone.raphael/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomasAlabes%2Fbackbone.raphael/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29676978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backbonejs","raphaeljs"],"created_at":"2026-02-21T08:01:29.552Z","updated_at":"2026-02-21T08:01:30.603Z","avatar_url":"https://github.com/tomasAlabes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backbone.raphael\n## An easy way to add svg/vml views into your Backbone app\n\nThis extension enables you to add views to your backbone apps tweaking how\nBackbone and RaphaelJS handle event bindings.\n\n## Quickstart guide\n* Add backbone.raphael.js after Backbone and all it dependencies\n\n```html\n\u003cscript type=\"text/javascript\" src=\"raphael.js\"\u003e\u003c/script\u003e\n\n\u003cscript type=\"text/javascript\" src=\"jquery-2.0.1.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"underscore.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"backbone.js\"\u003e\u003c/script\u003e\n\n\n\u003cscript type=\"text/javascript\" src=\"backbone.raphael.js\"\u003e\u003c/script\u003e\n\n\n\u003cscript type=\"text/javascript\" src=\"yourApp.js\"\u003e\u003c/script\u003e\n```\n\n\n* Use it in your app\n\n```js\nvar paper = Raphael(\"container\", 300, 640);\n\n// Usual backbone model\nvar CircleModel = Backbone.Model.extend();\n\nvar CircleView = Backbone.RaphaelView.extend({\n\n    initialize: function(){\n        var model = this.model;\n        this.listenTo(model, \"change\", this.render);\n\n        // Create raphael element from the model\n        var circle = paper.circle(model.get(\"x\"), model.get(\"y\"), model.get(\"radio\")).attr({fill: model.get(\"color\")});\n\n        // Set the element of the view\n        this.setElement(circle);\n    },\n\n    events: {\n        // Any raphael event\n        \"click\": \"sayType\"\n    },\n\n    sayType: function(evt){\n        console.log(evt.type);\n    },\n\n    render: function(){\n        var circle = this.el;\n        var model = this.model;\n\n        //When the model changes, so the element\n        circle.attr({\n            cx: model.get(\"x\"),\n            cy: model.get(\"y\"),\n            r: model.get(\"radio\"),\n            fill: model.get(\"color\")\n        });\n    }\n\n});\n\nvar model = new CircleModel({\n    x: 100,\n    y: 150,\n    radio: 50,\n    color: \"blue\"\n});\n\nvar view = new CircleView({\n    model: model\n});\n```\n\n**For a more complex example see the sample app in this repo.**\n\nThats it!\n\n## Copyright and license\nLicensed under the **MIT** license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomasalabes%2Fbackbone.raphael","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomasalabes%2Fbackbone.raphael","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomasalabes%2Fbackbone.raphael/lists"}