Si vous transmettez des données à un élément DOM à partir du serveur, vous devez définir les données sur l'élément:
<a id="foo" data-foo="bar" href="#">foo!</a>
Les données sont ensuite accessibles via .data()
jQuery:
console.log( $('#foo').data('foo') );
//outputs "bar"
Cependant, lorsque vous stockez des données sur un nœud DOM dans jQuery à l' aide de données, les variables sont stockées sur l' objet nœud . Il s'agit de prendre en charge des objets et des références complexes, car le stockage des données sur l' élément de nœud en tant qu'attribut n'acceptera que les valeurs de chaîne.
Poursuivant mon exemple d'en haut:
$('#foo').data('foo', 'baz');
console.log( $('#foo').attr('data-foo') );
//outputs "bar" as the attribute was never changed
console.log( $('#foo').data('foo') );
//outputs "baz" as the value has been updated on the object
En outre, la convention de dénomination des attributs de données a un peu de "gotcha" caché:
HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('fooBarBaz') );
//outputs "fizz-buzz" as hyphens are automatically camelCase'd
La clé coupée fonctionnera toujours:
HTML:
<a id="bar" data-foo-bar-baz="fizz-buzz" href="#">fizz buzz!</a>
JS:
console.log( $('#bar').data('foo-bar-baz') );
//still outputs "fizz-buzz"
Cependant, l'objet renvoyé par .data()
n'aura pas la clé coupée:
$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work
C'est pour cette raison que je suggère d'éviter la clé coupée en javascript.
Pour HTML, continuez à utiliser le formulaire avec trait d'union. Les attributs HTML sont censés être automatiquement mis en minuscules ASCII , donc <div data-foobar></div>
, <DIV DATA-FOOBAR></DIV>
et <dIv DaTa-FoObAr></DiV>
sont censés être traités comme identiques, mais pour une meilleure compatibilité, la forme minuscule doit être préférée.
La .data()
méthode effectuera également une conversion automatique de base si la valeur correspond à un modèle reconnu:
HTML:
<a id="foo"
href="#"
data-str="bar"
data-bool="true"
data-num="15"
data-json='{"fizz":["buzz"]}'>foo!</a>
JS:
$('#foo').data('str'); //`"bar"`
$('#foo').data('bool'); //`true`
$('#foo').data('num'); //`15`
$('#foo').data('json'); //`{fizz:['buzz']}`
Cette capacité de diffusion automatique est très pratique pour instancier des widgets et des plugins:
$('.widget').each(function () {
$(this).widget($(this).data());
//-or-
$(this).widget($(this).data('widget'));
});
Si vous devez absolument avoir la valeur d'origine sous forme de chaîne, vous devrez utiliser .attr()
:
HTML:
<a id="foo" href="#" data-color="ABC123"></a>
<a id="bar" href="#" data-color="654321"></a>
JS:
$('#foo').data('color').length; //6
$('#bar').data('color').length; //undefined, length isn't a property of numbers
$('#foo').attr('data-color').length; //6
$('#bar').attr('data-color').length; //6
C'était un exemple artificiel. Pour stocker les valeurs de couleur, j'avais l'habitude d'utiliser la notation hexadécimale numérique (c'est-à-dire 0xABC123), mais il convient de noter que l' hex a été mal analysé dans les versions de jQuery avant 1.7.2 , et n'est plus analysé dans un à Number
partir de jQuery 1.8 rc 1.
jQuery 1.8 rc 1 a changé le comportement de la coulée automatique . Avant, tout format qui était une représentation valide d'un Number
était converti en Number
. Désormais, les valeurs numériques ne sont converties automatiquement que si leur représentation reste la même. Ceci est mieux illustré par un exemple.
HTML:
<a id="foo"
href="#"
data-int="1000"
data-decimal="1000.00"
data-scientific="1e3"
data-hex="0x03e8">foo!</a>
JS:
// pre 1.8 post 1.8
$('#foo').data('int'); // 1000 1000
$('#foo').data('decimal'); // 1000 "1000.00"
$('#foo').data('scientific'); // 1000 "1e3"
$('#foo').data('hex'); // 1000 "0x03e8"
Si vous prévoyez d'utiliser d'autres syntaxes numériques pour accéder aux valeurs numériques, assurez-vous de convertir la valeur en une Number
première, comme avec un unaire+
opérateur .
JS (suite):
+$('#foo').data('hex'); // 1000