如何在JSON字符串中传递“this”，然后需要将其转换为JS Obj

Question

I am building a small JS method where I attach data-* attrs to a link, bind a event to the link and send the data-* values to a 3rd party JS analytics API.

<a href="#" class="js-analytics-proxy" data-trackme='{"obj": this, "rmethod": "track", "partial-path": "/foo/bar" }'

And in a JS file

$('js-analytics-proxy').live('click', function() { 
    3rdParty.webTrack('site1', 'foo', $(this).data('trackme'));
});

The problem is:

1. By default, $(this).data('trackme') will return a String
2. If I $.parseJSON(..) it, it will fail because "obj": this is not a valid key/val pair in JSON string notation.
3. No matter what, when passed "thought" the data-* attr, only the String representation of of the JS obj name is passed.

I do realize that data-* are for "data" and arguable this is not data, but code, so it doesn't belong in it to begin with. Also, I would like to avoid "hardcoding" the obj: this key/val pair into my JS class (basically taking it out of the data-* attr, and adding it to the args in the JS method if possible.

---

Update 1: I am using this because the 3rdParty JS library expects it. The current implementation has

onclick='3rdParty.webTrack("site1", "foo", {"obj": this, "rmethod": "track", "partial-path": "/foo/bar" }' 

all over the markup. We are looking at a less obtrusive approach. Sometimes there are other key/val pairs which pass other JS objects in as well. The obj: this was an isolated example to illustrate the problem

---

Update 2: This seems dangerous, but I could create a convention where properties prefixed with "js:" will have their string value eval'd. { "js:obj": "this" } would be transformed to { "obj": this ... of course this comes with all the dangers of using eval, which is something I would like to avoid at all cost.

I could also simply change any String value of "this" to the current scope this which would be less dangerous, but IMO not very elegant.

Answer 1

jQuery.data() can store objects . Assign them using data() so jQuery can store them as objects. Also, retrieve them using data() as well.

//assign them via data()
$(element).data('trackme',{
    data : 'foo'
    ...
});

//retrieve them using data()
$(element).data('trackme');

Answer 2

Simply remove "obj": this , it's not json and won't work.

After that, it will become legit json and the following will work, given that ThirdParty.webTrack actually expects a DOM element:

$('js-analytics-proxy').live('click', function() {
    var data = $.parseJSON( $(this).data( "trackme" ) );
    data.obj = this;
    ThirdParty.webTrack('site1', 'foo', data);
});

Answer 3

When you bind the click to the event, you can grab the reference to this and add it to the object that you are trying to pass, maybe using something like this:

$('js-analytics-proxy').live('click', function() { 
    3rdParty.webTrack('site1', 'foo', $.extend(
        $.parseJSON($(this).data('trackme')), 
        { 'obj' : this }
    );
});

Obviously, you would also remove the "obj": this part from the data-trackme attribute of the a element.