Question

オプションを読み込むためのselect要素に次のデータ属性を格納しています。

<select name="DependsOn_Field" data-load='automatic' data-source='web.module().fields' data-value='name' data-display='label' data-filter='exclude_single' id='DependantField'></select> 

私の質問は、1つのDOM要素に多くのデータ属性を保存する必要がある場合にはどのような方法が最適ですか？ JSONデータを持つ単一のデータ属性を持つか、必要な値ごとに個別のデータ属性を持つ方がよいでしょうか。

Answer 1

私は質問には、データ属性は静的であると思いますか？おそらく彼らは変わるつもりですか？変更する場合や編集したい場合は、JSONの方がはるかに優れています。しかし、静的でその属性を読み込もうとしているのであれば、データ属性はきちんとしていると思います。これはまさにデータ属性のためです。私はあなたの属性の束を持っているので、それは面倒なように見えますが、それは問題ないと思います。

EDIT変更または編集によって、クライアントブラウザで動的に編集することを意味します。

これが役に立ちます。

Answer 2

これは、その使用方法に完全に依存します。

値が単純な文字列で、JavaScriptからそれらの値にアクセスしている場合は、属性をdata-の属性に保持するのが適切でしょう。

自分の価値観は、複雑なJSONオブジェクトである場合、それはdata-属性で完全なJSON値を格納し、（jQueryのが利用可能であることを簡単にするために仮定して）それを読みますヘルパーを定義するために多くの意味をなすことがあります。

function getElemData(elem) { 
    var $elem = $(elem); 
    var elemData = $elem.data("_jsonData"); 
    if (!elemData) { 
     elemData = JSON.parse($elem.attr("data-json-data")); 
     $elem.data("_jsonData", elemData); 
    } 
    return elemData; 
} 

最後に、データが（サーバーによって書き込まれ、次に別の場所で直接読み取られて送信される）場合、ブロブ全体を単一のdata-属性に保つことが最も適切です。