6

Html5データ属性を尊重して

次のようなコードがある場合:

 <li class="user" data-name="Royi Namir" data-city="Boston" data-lang="js" data-food="Bacon"> </li>

ドキュメントに非常に多くの冗長な文字を追加しています。

行うには、このタイプのみdata-XXXが必要です。

myDomElement.dataset[xxx];

しかし、私はこれを簡単に行うことができました

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

これらの余分な接頭辞がなければdata-（余分な文字をたくさん節約できます）。[d^] のような「start with」セレクターを介して読み取る– jQuery API

ここで何か不足していますか？

4

3 に答える 3

14

これを使用できます：

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

その後

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

jQuery を使用すると、さらに簡単になります。

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

そして、すべてのユーザーを取得したい場合:

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

特により深いプロパティでは、冗長性が少なくなり、直接使用可能な構造になります。データ属性は文字列だけのものではありません。

しかし、data-属性に関する主なポイントは、プラクティスを正規化することです。HTML を見ると、どの属性が標準の HTML (ビュー) 属性で、どの属性がデータ属性 (アプリケーション ロジックに固有) であるかが明確になります。

于 2013-01-04T10:32:13.297 に答える
2

私が時々使用する別の方法は、クエリ文字列のようにデータ文字列を形作ることです。

<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;
}

エラーが発生しにくく（アポストロフィなどの心配がありません）、読みやすいimhoです。

jsFiddle

于 2013-01-04T10:50:51.890 に答える
1

非常に多くの冗長な文字を追加している場合は、アプリケーションをクライアント側の MVC フレーバーでリファクタリングすることをお勧めします。基本的にはデータを JSON として渡し、テンプレートを介して処理します。

data-*属性は優れており、ドキュメントの標準に準拠したまま DOM に何かを挿入できますが、DOM 自体をアプリケーションのデータ レイヤーとして使用することに依存している場合は、前述のソリューションを使用することを強くお勧めします。

于 2013-01-04T10:37:46.153 に答える