Set and get data like a raphaelJS

Question

I'm working with RaphaelJS. I've noticed that you can add dynamic data to the elements, for example:

1. to assign a value:

   el.data("key",value);
   

2. to get a value:

   el.data("key")
   

How can I copy this behaviour using JQuery or Javascript?

Answer 1

Hi I'm trying a wild guess here: as I understand correctly you'd like to communicate from Rapahel to jQuery.

The best I've come up so far is to keep references of both and use them accordingly as Raphael seems not to insert data into dom directly (apart from ID attribute):

$(document).ready(function () {
    var paper = Raphael("div", 400, 150);
    var circle = paper.circle(80, 80, 30).data('title', 'Red dot').attr({
        fill: '#f00'
    });
    circle.node.id = 'my_circle';

    $el_circle = $(circle[0]); // get DOM element out of Rapahel's object
    $el_circle.on('click', function () {

        // use Raphael reference:
        alert("My is title: " + circle.data('title'));

    });
});

http://jsfiddle.net/saxxi/Z35NV/

References.

• the possibilities: raphael.js - custom attributes
• the explanation: Where does Raphael.js store an element's data that is set with the element.data() method?
• Combining Raphael and jQuery to achieve browser compatibility