Metadaten im Markup, welches man für Javascripts brauchte, hatte man meist in CSS Klassen, rel Attribut oder Hidden-Inputfeldern gesteckt. Mit den HTML5 data-* (gesprochen “Data dash”) Attributen gibt es jetzt einen saubereren Weg für dieses Szenario.
Was kann man mit diesen Attributen machen und wie sieht das Markup aus?
Wer im Javascript bestimmte Daten braucht, welche sich bislang in versteckten Input-Feldern oder CSS Klassen fanden (siehe oben ;) ) befanden, kann man diese nun direkt an das jeweilige DOM Element schreiben. Man legt dazu einen Schlüssel fest, welcher einen Wert besitzt – ziemlich einfach.
Dazu gibt es das “data-*” Attribut. Dahinter kann man beliebig seine eigenen Keys festlegen, wie z.B. in meinem Beispiel data-message (das Beispiel soll nur die Funktionsweise erklären, daher ist das Beispiel “aus der Luft gegriffen”)
<h2 id="headline" data-message="ImportantMessage">Welcome to ASP.NET MVC!</h2>
Via jQuery den data-* Wert auslesen
Beim Auslesen holen wir uns das Element und rufen dann unseren Key auf:
alert($("#headline").data("message"));Via jQuery den data-* Wert setzen
Beim Setzen geben wir noch einen zweiten Parameter mit:
$("#headline").data("message","Neue Daten!");
data-* und ASP.NET MVC
Die data-* Sachen sind nur auf dem Client bekannt und werden auch bei einer HTML Form nicht mit übertragen. Natürlich kann man die data-* Sachen über einen View “vorbefüllen”
<h2 id="headline" data-Message="@ViewBag.Data">@ViewBag.Message</h2>
Der Rest geschieht dann nur noch auf dem Client.
Browser Kompatibilität
Das Feature funktioniert auch in älteren Browser (IE6) und sollte auch im mobilen Bereich keine Schwierigkeiten bereiten. Happy Coding!
Wofür sollte man es nicht einsetzen
Die data-* Attribute sind laut W3C nicht für 3rd Party Anwendungen gedacht – dafür gibt es z.B. die Microformate. Auch Style-Informationen oder bereits bestehende Mechanismen soll dieses Attribut nicht ersetzen.
Daran sollte man denken
Da jeder sein Key selbst festlegen kann, kann es natürlich beim Einsatz von diversen Javascript Plugins zu Überschneidungen kommen. jQuery Validation z.B. nutzt ebenfalls die data-* Attribute. Man sollte daher in der Benamung des Schlüssels kurz 5 Sekunden drüber nachdenken ob das Wort nicht evtl. von anderen Plugins verwendet wird (welche man selbst verwendet).
Welche Javascript Plugins machen davon schon gebrauch?
Aus dem Kopf heraus würde ich sagen, dass diverse Validierungsplugins (darunter jQuery Validation) davon gebrauch machen. Allerdings nutzt auch Knockout.js dieses Feature für das Data-Binding.
Ein paar interessante Links noch
- John Resig über die data Attribute
