Html5およびdata- *属性？</p> <pre><code><li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li> </code></pre> <p>私が文書に冗長な文字のかなり多くを追加している：私はこのようなコードがある場合はHTML5のデータへのすべてに関しては

Question

は

属性。

私だけ行うために data-XXXのこのタイプを必要とする

：私はは簡単には（それらの余分data-接頭辞なしでこの

<li class="user" dn="Royi Namir" dc="Boston" dl="js" df="Bacon"> </li> 

を行うことができ

myDomElement.dataset[xxx];

をただし、および私に余分な文字をたくさん救う）。それを読むには"start with " selector like [d^] – jQuery API

私はここに何か不足していますか？

Answer 1

あなたは、この使用することができますjQueryのを使用して

<li class="user" data-user='{"name":"Royi Namir", "city":"Boston", "lang":"js", "food":"Bacon"}'> </li> 

そして

var user = JSON.parse(element.dataset.user); 

を、それも簡単です：

var user = $(element).data('user'); 

そして、あなたはすべてのユーザーを取得したい場合：

var ​users = $('[data-user]').map(function(){return $(this).data('user')}); 

冗長性が少なく、直接的に使用できる構造、特に深い特性の構造があります。データ属性は文字列だけではありません。

しかし、約data-の主なポイントは、練習を正規化することです。 HTMLを見ると、標準のHTML（ビュー）属性とは何か、属性はデータロジック（アプリケーションロジック固有のもの）であることは明らかです。

Answer 2

あなたはかなり多く冗長文字を追加する場合は、あなたがclient-side MVC flavourでアプリケーションをリファクタリングすることができます - 基本的にJSONとしてデータを渡し、そしてテンプレートを経由して、それを扱います。

data-*属性はクールで、ドキュメントの標準を維持しながらDOMに情報を注入できますが、DOM自体をアプリケーションのデータレイヤーとして使用することに頼っている場合は、溶液。

Answer 3

代わりに、データ文字列をデータ文字列のように整形することもできます。

<li class="user" data-cn="dn=Royi Namir&dc=Boston&dl=js&df=Bacon"> 

そして使用してオブジェクトにそれを変換します。それはあまりエラーが発生しやすい（なしなどアポストロフィ心配）と良く読める私見です

function getData(id,el){ 
    var data = el.getAttribute('data-'+id).split('&'), ret = {}; 
    data.map(
     function(a){ 
      var curr = a.split('='); 
      this[curr[0]] = curr[1]; 
      return a; 
     }, ret 
    ); 
    return ret; 
} 

を。

jsFiddle