Está usando .data() para recuperar el valor de los atributos data- * una buena idea?

Question

En mi proyecto actualmente estoy usando algunos atributos de datos personalizados * en mi HTML para transmitir algunos datos adicionales que serán utilizados por jQuery. Encontré el método .data() y noté que si tengo un atributo data- * data-my-attribute, puedo recuperar su valor en jQuery seleccionando el elemento con el atributo y llamando al .data("my-attribute").

Supuse que esta era la forma en que se suponía que debía usarse (no examiné la documentación) y la utilicé a través de mi código jQuery. Sin embargo, ahora noté que cuando pongo por ejemplo una cadena "000005643" en el atributo HTML data- *, .data("my-attribute") devuelve 5643 mientras que .attr("data-my-attribute") devuelve "000005643". Donde este último es lo que yo quería. Esto me llevó a buscar la documentación y descubrí que hay más en .data() de lo que pensaba. Además, nunca vi ningún texto o ejemplo que indique que deba usar .data() para recuperar los valores de los atributos data- *. Esto me preocupa que estoy haciendo algo fundamentalmente equivocado.

¿Debo cesar y desistir con el uso de .data() de esta manera o no? De lo contrario, ¿podría vincularme a alguna documentación sobre la función .data() que explica este uso?

Answer 1

El método data() que devolvió atributos HTML5 data-* fue introduced in 1.4.3.

A partir de jQuery 1.4.3 HTML 5, los atributos de datos se incorporarán automáticamente al objeto de datos de jQuery.

Se intenta convertir la cadena a un valor de JavaScript (esto incluye booleanos, números, objetos, matrices y nulo); de lo contrario, se deja como una cadena. Para recuperar el atributo del valor como una cadena sin ningún intento de convertirlo, use el método attr().

Source.

Parece jQuery es cierto que desea un número, por lo que le devuelve un Number, no el String.

Si lo quiere como una cadena, use attr().

Answer 2

Actualmente estoy trabajando en portar esta funcionalidad a Zepto. Sí, no es realmente algo malo con la especificación HTML de datos, pero es solo la implementación de jQuery. Está tratando de eludir el hecho de que los datos no manejan muy bien las cadenas y luego trata de ser elegante y extraer valores como null, ints y floats para usted. Supongo que una solución alternativa es poner un carácter de cadena delante de tu valor y substraerlo cuando lo recuperes. O eso o use attr ('data-'), aunque ir y venir entre .data y .attr podría llevar a resultados diferentes, como habrán notado. Quédate con uno o el otro.