Präsentiert auf dem zweiten Kasseler Webmontag: http://webmontag.de/location/kassel/2014-01-20

1. jQuery .data()
und HTML5 data Attribute

2. Michael Kühnel
•
Macht Internet seit Netscape 4.7
•
Frontend Developer bei der SMA Solar Technology
AG
•
Twitter: @mkuehnel
•
Website: www.michael-kuehnel.de

3. Was ist Query .data()?
•
.data() und .removeData() – seit jQuery 1.2.3
•
hat nichts mit HTML5 zu tun
•
Key-Value-Speicher an DOM Elementen

4. Nutzung kurz erklärt
$('#elem').data( 'foo', 52 );
$('#elem').data( 'bar', { myType: 'test', count: 40 } );
$('#elem').data( { baz: [ 1, 2, 3 ] } );
$('#elem').data( 'foo' ); // 52
$('#elem').data(); // {
foo: 52,
bar: { myType: 'test', count: 40 },
baz: [ 1, 2, 3 ]
}
$('#elem').removeData('foo');
$('#elem').removeData();

5. Für was kann man das
gebrauchen?
Nutzereingaben zwischenspeichern, Status von
Elementen speichern, IDs aus Datenbanken … usw.

6. Was sind HTML5 data
Attribute?
Custom Attribute in HTML-Markup (data-*)
<ul>
<li data-foo="52">Element</li>
<li data-foo-bar="{ myType: 'test', count: 40 }">
Element
</li>
</ul>
Empfehlung: Hyphens wegen Namespacing (datamodulname-key).

7. Browsersupport
HTML-Markup:!
•
Jeder Browser der den HTML5 Doctype versteht
Natives JavaScript:!
•
Zugriff über element.dataset property ab IE11
•
Zugriff über element.getAttribute ab IE5.5

8. Data Attribute und CSS Attribut
Selektoren
Nur lowercase und Bindestriche verwenden
#element[data-fooBar="25"] {
background-position: -16px 0;
}
💩
#element[data-foo-bar="25"],
#element[data-foobar="25"] {
background-position: -16px 0;
}
👍

9. jQuery 💖 HTML5 data-*
Data Attribute lesen
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
var data = $('#element').data('fooBar');
Siehe: http://api.jquery.com/data/#data-html5

10. Datentypen-Konvertierung
mit .data()
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
// 25 -> string
var data = $('#element').attr('data-foo-bar');
!
// 25 -> number
var data = $('#element').data('fooBar');
.data() »kennt« diese Datentypen:
•
booleans, strings, numbers, objects, arrays, null

11. Beachtenswert I
.data() liest den Value des HTML5 data Attributes nur
beim ersten Aufruf auf dem Element!
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
$('#element').data('fooBar'); // -> 25
$('#element').attr('data-foo-bar', '50');
$('#element').data('fooBar'); // -> 25
Lösung:!
Entweder mit .attr() lesen oder mit .data() setzen.

12. Beachtenswert II
Zu viel Magie?
HTML-Markup:
<div data-tweet-id="4238802317582131"></div>
<div data-tweet-id="423880231758213120"></div>
JavaScript:
$('div').each(function() {
console.log(typeof($(this).data('tweetId')));
});
// --> number
// --> string // WTF?!?
Grund: Der Maximalwert einer JavaScript Zahl ist 253
– also 9007199254740992

13. Fragen?!
💭
Twitter: @mkuehnel
E-Mail: mail@michael-kuehnel.de

14. Links
•
jQuery data im Browser sichtbar machen
•
Chrome: https://chrome.google.com/webstore/
detail/jquery-debugger/
dbhhnnnpaeobfddmlalhnehgclcmjimi
•
Firebug: http://firequery.binaryage.com/

15. Quellen
•
http://api.jquery.com/data/
•
http://api.jquery.com/removeData/
•
http://www.youtube.com/watch?v=9anCUpoiFVw&feature=youtu.be&t=19m46s
•
http://www.learningjquery.com/2011/09/using-jquerys-data-apis/
•
http://html5doctor.com/html5-custom-data-attributes/
•
http://blog.jquery.com/2008/02/07/jquery-1-2-3-released/
•
http://caniuse.com/#feat=dataset
•
http://thinkco.de/jquery-data-considered-potentially-harmful/
•
http://lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html