1

data-*リンクに属性を添付し、イベントをリンクにバインドし、data-*値をサードパーティの JS 分析 API に送信する小さな JS メソッドを構築しています。

<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. JSON文字列表記の有効なキー/値のペアではない$.parseJSON(..)ため、失敗します。"obj": this
  3. なんといってもdata-*attr を「考え」て渡すと、JS の obj 名の文字列表現だけが渡されます。

私はそれdata-*が「データ」のためのものであり、議論の余地があるthisのはデータではなくコードであることを理解しています。また、obj: this key/val ペアを JS クラスに「ハードコーディング」することは避けたいと思います (基本的には data-* attr から取り出し、可能であれば JS メソッドの引数に追加します。

更新 1: 3rdParty JS ライブラリが期待しているため、これを使用しています。現在の実装には

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

マークアップ全体。私たちは目立たないアプローチを検討しています。他の JS オブジェクトを渡す他のキーと val のペアが存在する場合もあります。オブジェクト: これは問題を説明するための孤立した例です

更新 2: これは危険に思えますが、"js:" で始まるプロパティの文字列値が評価されるという規則を作成できます。{ "js:obj": "this" }もちろん、これにはeval{ "obj": this ...を使用するすべての危険が伴います。これは、私が何としても避けたいことです。

「this」の文字列値を現在のスコープに単純に変更することもできますが、thisこれは危険性が低くなりますが、IMO はあまりエレガントではありません。

4

3 に答える 3

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

jQuery.data()オブジェクトを格納できます。を使用して割り当ててdata()、jQuery がオブジェクトとして保存できるようにします。また、同様にそれらを取得しますdata()。

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

//retrieve them using data()
$(element).data('trackme');
于 2012-05-26T15:09:38.797 に答える
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 に答える