2013-04-05 12 views
23

属性がdataの属性で任意のカスタムデータを追加できるので、JSONリストのセットをdata属性として含めることをお勧めしますか?その後、対応するJSONJavaScriptイベントgetAttribute("data-x")で簡単にアクセスできます。JSONをHTMLデータ属性に追加するのは悪いですか?

実際、私の質問は、HTML属性に大量のデータを追加するのが標準的で効率的で合理的なのでしょうか?

例えば

<div data-x="A LARGE SET OF JSON DATA" id="x"> 

または大規模なJSONデータのセットが<script>タグ内に格納されなければならない、とHTML属性がさえdata属性のために、データの大規模なセットのための右の場所ではありません。

+4

スクリプトタグにデータを保存するほうがずっと良いでしょう。技術的に可能な限り、それをデータ属性に格納することは、悪い習慣のように思えます。あなたが本当にしたければ、あなたはできます。 HTML5では、属性の長さに制限はありません。 (あなたはそれをエンコードしなければならないかもしれません。) – GJK

+1

@GJK:それはユースケースに依存します。問題のJSONオブジェクトが単一のグローバルデータオブジェクトであれば、おそらく正しいでしょう。複数の類似したオブジェクトがそれぞれ特定のDOM要素に関連付けられている場合、それはデータ属性が意図しているものとまったく同じです。したがって、それらを使用することは必ずしも悪いことではありません。単一の属性でももちろん可能ですが、個々のプロパティを異なるデータ属性に格納するオプションもあります)。 –

+0

@ GJKデータ属性に大量のデータセットを格納することは悪い習慣とは考えられません。このようなタグを作成する理由は、データを格納するためです。 –

答えて

29

データ属性にすべてを格納する代わりに、識別子を使用してデータにアクセスすることができます。

var myBigJsonObj = { 
         data1 : { //lots of data}, 
         data2 : { //lots of data}     

        }; 

をして、あなたはそうのような一部のHTMLを持っていた:

したがって、たとえば、あなたがこれを行うことが

<div data-dataId="data1" id="x"> 
あなたはとてもようになりましデータを取得するためにjqueryのを使用することができます

var dataId = $('#x').attr('data-dataId'); 

var myData = myBigJsonObj[dataId]; 

これが最良の方法です。

+0

これは本当にスマートな解決策です!ありがとうございました。 'myBigJsonObj ["property"] = value;'コンテンツを動的に作成して取得することができます – Silve2611

+2

これは常に機能するとは限りません。特に、サーバー側からデータを設定したい場合。 – theusguy

0

データ属性に長いJSON文字列を埋め込むことはできませんが、JSONデータのプロパティごとに1つのデータ属性を追加する方が正しいと思います。例えば:

Javascriptを:

var dataObj = { foo: 'something', bar: 'something else' } 

HTML:

<div data-foo="something" data-bar="something else"></div> 

JSONオブジェクト内の各データはDOM要素に付加されたデータの別の、独立にアクセス可能な部分に相当し、この道。そうでない場合は、浮遊」の文字、あなたのページを中断します

+0

'JSON.parse'を使うと、必要なら文字がエスケープされると思います – Chintsu

1

はあなたがHTMLにオブジェクトvar dataObj = { foo: 'something', bar: 'something else' };を保存したいと言う - あなたがHTMLに挿入している値をエスケープする必要がありますいずれかの方法があることを念頭に置い

ベア。データ属性。

は、まず私たちが var stringifiedDataObj = JSON.stringify(dataObj);

を持っているように、あなたはjQuery.data() API

で例えばデータ属性としてstringifiedDataObjを設定するためにjQueryを使用することができ、オブジェクトを文字列化を検討
関連する問題