¿Puedo almacenar atributos personalizados en HTML DOM como un registro de base de datos?

Question

Al desarrollar para navegadores FF3 e IE6/7 con jQuery, ¿hay problemas de compatibilidad al configurar atributos personalizados en etiquetas HTML?

En primer lugar, conozco la función data() de jQuery y básicamente hace lo que quiero, pero los datos no sobreviven a la función clone(). Este es un problema cuando se usan los complementos arrastrables/drop-up de jQuery UI porque clona elementos DOM durante un arrastre/soltar. Para el propósito de esta pregunta, necesito una alternativa al data().

Quiero mantener los datos entre las operaciones de arrastrar/soltar. Quiero ser capaz de inyectar datos en el elemento DOM que se mueve durante una operación de arrastrar/soltar. Para hacer esto, puedo construir elementos secundarios HTML para simular un registro de base de datos. La experimentación rápida muestra que Firefox no tiene problemas al utilizar cualquier nombre de atributo. Quiero almacenar campos de datos. Sin embargo, la especificación HTML 4 dice que ciertas etiquetas solo pueden contener ciertos nombres de atributos. ¿Completar el DOM con atributos no estándar causa problemas de incompatibilidad con los navegadores que he mencionado?

Answer 1

Echa un vistazo a esta pregunta similar le pregunté a una tiempo atrás: Can I just make up attributes on my HTML tags?

Personalmente, no me gusta mucho las respuestas sugeridas de poner todos los datos en el atributo de clase. Se siente, solo ... ¿mal, sabes? En mi experiencia, aunque tu página no será válida si creas atributos, simplemente lo hago de todos modos. Pruébelo en los 4 principales navegadores y, si funciona, ¿a quién le importa?

La mejor solución que se me ocurre es la que no es válida ahora, pero estará en HTML5, así que está bien. Según lo sugerido por ms2ger en esa otra pregunta, el prefijo atribuye a su medida con data-

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data

Answer 2

Tenga una mirada en http://www.persvr.org/

Persevera cuenta con un nuevo motor de almacenamiento de objetos nativo llamado JavaScriptDB que proporciona escalabilidad de gama alta y el rendimiento

http://ajaxian.com/archives/perseveres-javascriptdb-impressive-json-performance

Answer 3

Ausente alguna manera estándar de hacer esto en HTML 4, estaría tentado a crear un elemento oculto que corresponde a mi se pueda arrastrar y almacenar los datos asociados en ella. Asigne un nombre al elemento oculto relativo al elemento que se puede arrastrar para que pueda buscar fácilmente la información correspondiente. La siguiente extensión implementa esto utilizando un tramo oculto. Nota: al probarlo, no pude replicar sus problemas con los elementos que se podían arrastrar. Data() pareció funcionar bien para mí, pero no lo probé con varios complementos, solo con UI.Draggable.

Uso:

$('#draggableDiv').externalData('key','data'); 
var d = $('#draggableDiv').externalData('key'); 

jQuery.fn.externalData = function(key, data) { 
    var value = this; 
    this.each(function() { 
     var id = this.id+'_external_data'; 
     var elem = jQuery('#'+id+':first'); 
     if (elem.size() == 0) { 
      elem = $('<span style="display: none;" id="' + id + '"></span>"'); 
      elem.appendTo(document.body); 
     } 
     if (data) { 
      elem.data(key,data); 
     } 
     else { 
      value = elem.data(key); 
      return false; 
     } 
    }); 
    return value; 
}; 

Answer 4

Los nuevos HTML 5 atributos de datos podría ser lo que buscas.

http://ejohn.org/blog/html-5-data-attributes/

http://dev.w3.org/html5/spec/Overview.html#custom

Answer 5

Esto es relativamente desconocida, pero bastante Dang útil: jQuery Metadata Plugin. Le permitirá almacenar datos dentro de los nombres de las clases para su recuperación. Se usa principalmente para el complemento de validación pero, en realidad, se puede adaptar a cualquier escenario.

Buena suerte con lo que sea que esté trabajando.