#20: ¡Datos! datos-*! .datos()! .attr(datos-*)! | Programar Plus

← Vídeo anterior Vídeo siguiente →

Datos. En el mundo de jQuery, se trata de bits de información que se adjuntan directamente a los elementos (en lugar de, por ejemplo, una variable con responsabilidad solo sobre sí misma). Hay un montón de formas de guardar bits de datos en el “lado del cliente” (en el navegador, en lugar del servidor). Hay variables de cualquier tipo, cookies, localStorage, indexDB y quién sabe qué más. Los datos se utilizan cuando esos datos son específicamente relevantes para un elemento específico.

Como muchos métodos jQuery, tiene un setter (dos parámetros):

$("#thing").data("name", "value");

y un getter (un parámetro):

$("#thing").data("name");
// "value"

Puede usarlo en cualquier objeto jQuery. Si hay varios elementos en ese objeto, todos obtienen ese valor de datos cuando lo usa como setter. Si hay varios elementos en ese objeto cuando lo usa como captador, usará el primer elemento.

Una forma de pensar posiblemente en los datos es que el elemento es como un espacio de nombres. Muchos elementos pueden usar el mismo “nombre” de datos pero tener valores diferentes.

Hay un caso de uso del mundo real en una demostración antigua de CSS-Tricks, Google Maps Slider. En esa demostración, hay una lista de ubicaciones y un mapa de Google integrado. A medida que pasa el cursor sobre las ubicaciones, el mapa se mueve para centrar esa ubicación. Para hacer esto, la API del mapa necesita coordenadas. Tiene sentido tener esos datos en el HTML para esas ubicaciones, pero no necesitamos verlos. Ese es un caso de uso perfecto para data-* atributos en HTML (nuevo en HTML5). Un elemento de la lista en esa lista de ubicaciones puede ser así:

<li data-geo-lat="41.9786" data-geo-long="-87.9047">
  <h3>O'Hare Airport</h3>
  <p>Flights n' stuff</p>
  <p class="longdesc"><strong>About:</strong> Info about location...</p>
</li>

data-* es solo una forma de decir data-anything. Simplemente puede inventar atributos de datos. Todo lo que quieras. En este caso, inventamos uno para la latitud y otro diferente para la longitud. Cuando un evento de desplazamiento del mouse se activa en ese elemento de la lista, simplemente usamos el jQuery getter para .data() para extraer la información y usarla con la API.

Así que ahora hemos visto los datos de dos maneras, los datos que se configuran y obtienen del mismo JavaScript, y los datos que comienzan en HTML y son utilizados por JavaScript. Ambos están bien y la API es la misma. Usted podría pensar en usar .data() como captador de la información en los atributos data-* es extraño. es un poco Por lo general, accede a la información en atributos en HTML como este:

$("#thing").attr("rel"); // or any other attribute

También puedes usarlo de esa manera si quieres:

$("#thing").attr("data-geo-lat");

El .data() getter es solo un atajo. Y me gusta un poco porque te pone en la mentalidad correcta.

Sin embargo, es importante tener en cuenta que el uso .data() como lo hace un setter en realidad no altera la data-* atributo en el HTML. Ese es un buen valor predeterminado porque no alterar el DOM significa que es más rápido. Si es absolutamente necesario cambiar el atributo en el HTML, use el .attr() método como colocador. También tenga en cuenta el uso .attr() debe incluir el prefijo “datos-” que no necesita usar .data().

$("#thing").attr("data-name", "Chris");

Es posible que deba hacer eso para asegurarse de que otras partes de la aplicación tengan acceso, o si está haciendo algo como escribir selectores CSS contra ellos (por ejemplo, [data-something="whatever"] { })

(Visited 8 times, 1 visits today)