¿Por qué los cambios en jQuery $ .fn.data() no actualizan los atributos html 5 data- * correspondientes?

Question

Aquí está un ejemplo simple para ilustrar el comportamiento:

Dada esta html marcado:

<div data-company="Microsoft"></div> 

y este código jQuery (usando jQuery 1.5.1):

// read the data 
alert($("div").data("company")); 
// returns Microsoft <<< OK! 

// set the data 
$("div").data("company","Apple"); 
alert($("div").data("company")); 
// returns Apple <<< OK! 

// attribute selector 
alert($("div[data-company='Apple']").length); 
// returns 0 <<< WHY??? 

// attribute selector again 
alert($("div[data-company='Microsoft']").length); 
// returns 1 <<< WHY??? 

// set the attribute directly 
$("div").attr("data-company","Apple"); 
alert($("div[data-company='Apple']").length); 
// now returns 1 <<< OK! 

Desde jQuery importa automáticamente los datos HTML5- * en el objeto de datos de jQuery, ¿no deberían actualizarse los atributos también cuando cambian los datos?

Answer 1

Normalmente, no hay necesidad de Roundtripping .data() 's si eres consistente en el uso de .data() para acceder/set/modificar los datos sobre los elementos DOM. Por esa razón, tiene sentido evitar la sobrecarga de rendimiento al acceder al DOM para cada operación de ajuste/modificación .data() (.data() almacena internamente sus valores en jQuery.cache).

Si desea forzar el comportamiento de ida y vuelta a sí mismo, puede suscribirse a los eventos "changeData" "setData" o y luego empujar la actualización .data() en esos eventos a través del elemento DOM correspondiente a través .attr().

Answer 2

Este es el comportamiento correcto de acuerdo con los documentos:

Los atributos Data- se tira en el primer tiempo la propiedad de datos se accede y luego ya no se accede o mutado (se almacenan los valores de todos los datos internamente en jQuery).

(a partir de: http://api.jquery.com/data)