Возможно ли иметь несколько атрибутов data- {name} в HTML5?

Есть ли способ получить все 3 значения данных из этого элемента?

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

Это было бы очень полезно для проекта, который я запускаю. С этим я мог бы загрузить необходимые модули js и связать их с dom. Я знаю, это может показаться странным, но я пытаюсь что-то новое здесь.

Ответ 1

Вы можете поместить их все в один, если вы разделите их на что-то, а затем разделите их и поместите в массив.

// oops here 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/

Ответ 2

Ответ на ваш вопрос заключается в том, что HTML не поддерживает несколько экземпляров одного и того же свойства. Все типичные способы, по которым вы можете получить этот атрибут, будут извлекать только один из трех.

Обычный способ решить эту проблему - использовать один экземпляр атрибута и поместить в него несколько путей. Для путей они обычно разделяются полуколониями.

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

И затем используйте код для разбиения многозначного атрибута на массив.

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

Ответ 3

Вы можете использовать более сложные структуры в атрибутах data-.

Вместо этого:

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

вы можете сделать это:

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

Доказательство с использованием jQuery.data() (которое просто извлекает массив следующим образом: jQuery('#viewport').data('requires')) здесь: http://jsfiddle.net/3StZs/