jQuery Données vs Attr?

Question

Quelqu'un pour être en mesure de clarifier l'utilisation de l' $.data() sur $.attr() lors de l'utilisation d' data-someAttribute ?

Ma compréhension est que si je veux utiliser $.data() le stockage et la récupération est à l'intérieur de l' $.cache de jQuery et pas dans les DOM ?

Donc en gros, si je veux utiliser $.cache pour le stockage de données que je devrais utiliser $.data d'autre si je veux ajouter HTML5 Attributs Data-je dois utiliser $.attr('data-attribute','mycoolvalue')

?

Answer 1

Si vous êtes à la transmission des données à un élément du DOM à partir du serveur, vous devez configurer les données sur l'élément:

<a id="foo" data-foo="bar" href="#">foo!</a>

Les données peuvent ensuite être consulté à l'aide de .data() en jQuery:

console.log( $('#foo').data('foo') );
//outputs "bar"

Toutefois, lorsque vous stockez des données sur un nœud DOM en jQuery en utilisant les données, les variables sont stockées dans le nœud de l'objet. C'est pour accueillir les objets complexes et de références que de stocker les données sur le nœud de l'élément comme un attribut ne peuvent accueillir que des valeurs de chaîne.

_{En continuant mon exemple ci-dessus:}

$('#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

Aussi, la convention de nommage des attributs de données a un peu caché d'une "chasse aux sorcières":

_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

Le trait d'union de la clé fonctionne 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 retourné par .data() n'auront pas le trait d'union ensemble de clés:

$('#bar').data().fooBarBaz; //works
$('#bar').data()['fooBarBaz']; //works
$('#bar').data()['foo-bar-baz']; //does not work

C'est pour cette raison que je vous suggérons d'éviter les mots clés dans le code javascript.

Pour le HTML, gardez à l'aide de la forme de trait d'union. Attributs HTML sont censés ASCII-lowercase automatiquement, de sorte <div data-foobar></div>, <DIV DATA-FOOBAR></DIV>, et <dIv DaTa-FoObAr></DiV> sont censés être traités de manière identique, mais pour la meilleure compatibilité avec les minuscules formulaire doit être préféré.

L' .data() méthode permet d'effectuer quelques auto-casting si la valeur correspond à un motif 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 auto-casting capacité est très pratique pour l'instanciation des widgets et plugins:

$('.widget').each(function () {
    $(this).widget($(this).data());
    //-or-
    $(this).widget($(this).data('widget'));
});

Si vous devez absolument avoir la valeur d'origine comme une chaîne de caractères, alors vous aurez besoin d'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 le stockage des valeurs de couleur, j'ai utilisé numérique hexadécimal (c'est à dire 0xABC123), mais il est intéressant de noter que hex a été analysé de manière incorrecte en jQuery versions avant 1.7.2, et n'est plus analysée dans une Number de jQuery 1.8 rc 1.}

jQuery 1.8 rc 1 a modifié le comportement de l'auto-casting. Avant, c'est un format qui a été une représentation valide de un Number serait jeté à l' Number. Maintenant, les valeurs numériques sont les seuls auto-cast si leur représentation reste le même. C'est mieux vu avec un exemple.

_HTML:

<a id="foo"
    href="#"
    data-int="1000"
    data-decimal="1000.00"
    data-scientific="1e3"
    data-hex="0x0e8">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     "0x0e8"

Si vous prévoyez sur l'utilisation de l'alternative numérique syntaxes d'accéder à des valeurs numériques, assurez-vous de jeter la valeur en Number tout d'abord, comme avec un unaire + de l'opérateur.

_{JS (cont.):}

+$('#foo').data('hex'); // 1000