Question

Czy istnieje sposób na uzyskanie wszystkich 3 wartości danych z tego elementu?

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

Przydałoby się to w przypadku projektu, który rozpoczynam. W ten sposób mogę załadować wymagane moduły js i połączyć je z domem. Wiem, że to może zabrzmieć dziwnie, ale próbuję czegoś nowego tutaj.

Answer 1

Możesz umieścić je wszystkie w jednym, jeśli je rozdzielisz, a następnie podzielisz i umieścisz w tablicy.

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

Odpowiedź na to pytanie jest to, że HTML nie obsługuje wielu wystąpień tej samej nieruchomości. Wszystkie typowe sposoby, w jakie możesz pobrać ten atrybut, będą pobierać tylko jedną z nich.

Najczęstszym sposobem rozwiązania tego problemu jest użycie pojedynczej instancji atrybutu i wstawienie wielu ścieżek jako wartości. Ścieżki są zwykle oddzielone średnikami.

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

Następnie użyj kodu, aby podzielić atrybut wielowartościowy na tablicę.

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

Answer 3

Można użyć bardziej złożonych struktur w ramach atrybutów data-.

Zamiast tego:

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

można to zrobić:

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

Dowód użyciu jQuery.data() (który po prostu pobiera tablicę w ten sposób: jQuery('#viewport').data('requires')) jest tutaj: http://jsfiddle.net/3StZs/