HTML5に複数のdata- {name}属性を持たせることはできますか？

Question

この要素から3つのデータ値をすべて取得する方法はありますか？

<div id="viewport" 
    data-requires='js/base/paths' 
    data-requires='js/base/dialog' 
    data-requires='js/base/notifier'> 

これは、私が始めているプロジェクトにとって本当に便利です。これで、必要なjsモジュールをロードしてdomにリンクすることができました。私はそれが奇妙に聞こえるかもしれないことを知っているが、私はここで何か新しいことを試みている

Answer 1

何か別のものを分けて分割し、それらを分割して配列に入れることができます。

// oops here's plain JS 
var arrayData = document.getElementById('viewport').getAttribute('data-requries'); 
var arr = arrayData.split(','); 

for (i = 0; i < arr.length; i++) { 
    console.log(arr[i]); 
} 

http://jsfiddle.net/S7D2D/1/

Answer 2

あなたの質問への答えは、HTMLは、同じ特性の複数のインスタンスをサポートしていないということです。その属性を取得する一般的な方法はすべて、3つのうちの1つだけを取得します。

この問題を解決する通常の方法は、属性の単一のインスタンスを使用し、値として複数のパスを入れることです。パスの場合、通常はセミコロンで区切られます。

<div id="viewport" data-requires='js/base/paths;js/base/dialog;js/base/notifier'> 

そして、コードを使用して、多値属性を配列に分解します。

var requiredPaths = document.getElementById("viewport").getAttribute("data-requires").split(";"); 

Answer 3

data-属性内では、より複雑な構造を使用できます。これに代えて

：

<div id="viewport" 
data-requires='js/base/paths' 
data-requires='js/base/dialog' 
data-requires='js/base/notifier'> 

あなたがこれを行うことができます：あなたはおそらくhttp://jsfiddle.net/3StZs/