HTML5'te birden çok veri- {name} özelliğine sahip olmak mümkün mü?

Question

Bu 3 öğeden tüm veri değerlerini almanın bir yolu var mı?

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

Bu, başlattığım bir proje için gerçekten yararlı olur. Bununla gerekli js modüllerini yükleyebilir ve bunları dom'a bağlayabilirim. Garip gelebilir, biliyorum ama burada yeni bir şey deniyorum.

Answer 1

Onları bir şeyle ayırıp sonra ayırıp bir Array içine koyduysanız hepsini bir arada tutabilirsiniz.

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

Sorunuzun cevabı HTML, aynı özellik birden çok örneğini desteklemez olmasıdır. Bu özelliği alabileceğiniz tüm tipik yollar, yalnızca bu üçten birini alır.

Bu sorunu çözmenin genel yolu, özniteliğin tek bir örneğini kullanmak ve değer olarak birden çok yol koymaktır. Yollar için, genellikle yarı-kolonlarla ayrılırlar.

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

Ve sonra çok değerli özniteliği bir diziye ayırmak için kod kullanın.

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

Answer 3

Sen data- nitelikleri içerisinde daha karmaşık yapılar kullanabilirsiniz. Bunun yerine

:

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

Kanıtı (sadece Array bu şekilde alır ki: jQuery('#viewport').data('requires')) jQuery.data() kullanılarak: buradadır: muhtemelen http://jsfiddle.net/3StZs/