1

我正在构建一个小型 JS 方法，我将data-*attrs 附加到链接，将事件绑定到链接并将data-*值发送到第 3 方 JS 分析 API。

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

在一个 JS 文件中

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

问题是：

  1. 默认情况下，$(this).data('trackme')将返回一个String
  2. 如果我$.parseJSON(..)这样做，它将失败，因为"obj": this它不是 JSON 字符串表示法中的有效键/值对。
  3. 无论如何，当传递“思想” data-*attr 时，只传递 JS obj 名称的 String 表示形式。

我确实意识到这data-*是针对“数据”的，可争论this的不是数据，而是代码，所以它一开始就不属于它。另外，我想避免将 obj: this key/val 对“硬编码”到我的 JS 类中（基本上将其从 data-* attr 中取出，并尽可能将其添加到 JS 方法中的 args 中。

更新 1：我使用它是因为 3rdParty JS 库需要它。目前的实施有

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

到处都是标记。我们正在寻找一种不那么突兀的方法。有时还有其他键/值对也传递其他 JS 对象。obj：这是一个说明问题的孤立示例

更新 2：这似乎很危险，但我可以创建一个约定，其中以“js:”为前缀的属性将具有其字符串值 eval'd。{ "js:obj": "this" }当然，这会转化为{ "obj": this ...使用 eval 的所有危险，这是我想不惜一切代价避免的事情。

我也可以简单地将“this”的任何字符串值更改为当前范围this，这将不那么危险，但 IMO 不是很优雅。

4

3 回答 3

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');
于 2012-05-26T15:09:38.797 回答
1

当您将单击绑定到事件时，您可以获取对的引用this并将其添加到您尝试传递的对象中，可能使用如下内容：

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

显然，您还将从元素的属性中删除该"obj": this部分。data-trackmea

于 2012-05-26T15:17:10.030 回答
1

只需删除"obj": this，它不是 json 并且不会工作。

之后，它将成为合法的 json 并且以下内容将起作用，因为它ThirdParty.webTrack实际上需要一个 DOM 元素：

$('js-analytics-proxy').live('click', function() {
    var data = $.parseJSON( $(this).data( "trackme" ) );
    data.obj = this;
    ThirdParty.webTrack('site1', 'foo', data);
});
于 2012-05-26T15:14:39.517 回答