¿Es posible tener múltiples atributos de datos- {nombre} en HTML5?

Question

¿Hay alguna forma de obtener los 3 valores de datos de este elemento?

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

Esto sería realmente útil para un proyecto que estoy comenzando. Con esto podría cargar los módulos js necesarios y vincularlos a la dom. Sé que puede sonar extraño, pero estoy intentando algo nuevo aquí.

Answer 1

Puede ponerlos todos en uno si los separó por algo, luego los separó y los puso en una matriz.

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

La respuesta a su pregunta es que el HTML no es compatible con varias instancias de la misma propiedad. Todas las formas típicas en las que podrías recuperar ese atributo solo recuperarán uno de los tres.

La forma habitual de resolver este problema es utilizar una única instancia del atributo y poner varias rutas como el valor. Para caminos, generalmente están separados por punto y coma.

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

Y, a continuación, utilice el código para dividir el atributo multivalor en una matriz.

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

Answer 3

Puede utilizar estructuras más complejas dentro de los atributos data-.

lugar de esto:

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

usted puede hacer esto:

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

prueba usando jQuery.data() (que solo recupera la matriz de esta manera: jQuery('#viewport').data('requires')) está aquí: http://jsfiddle.net/3StZs/