jQuery: Usando el attr con atributos personalizados

Question

En este momento estoy haciendo varias cosas, como no válidos:

<span time="50" distance="60"></span> 

Y luego agarrar esa información con:

var time = $('span').attr('time'); 
var distance = $('span').attr('distance'); 

y luego hacer varias cosas con el tiempo y distancia en jS/jQuery.

Para mí, esto se siente mal. Es insemático, pero realmente no me importa un comino (los datos reales no son el tiempo y la distancia, sino algo completamente inútil y específico de la página, nada de lo que les interese a los SE). ¿Pero hay alguna otra razón por la cual esta es una mala idea?

Sé que hay un complemento de metadatos que hace algo similar de una manera más 'oficial', y pensé en usarlo. Pero estas cosas .attr son adecuadas para mis necesidades y no veo ningún motivo convincente para usar el complemento.

Así que básicamente, este es un patrón decente para usar, y si no, ¿por qué no? Y debería estar interesado en el complemento de metadatos.

Gracias.

Answer 1

HTML5 incluye compatibilidad para incrustar datos en atributos que son retrocompatibles. He aquí un ejemplo:

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

AgentesDeUsuario quizá implementarán la idea .dataset en Javascript, lo que permitiría fácilmente que usted saca los bits de datos por separado, pero por ahora sólo cambiar sus clases para incluir Data- es lo suficientemente bueno. Esto se validará como HTML5.

Para mí esto es mucho mejor que esa idea de jquery de metadatos, eso me parece tonto.

See here for more info.

Answer 2

Si va a utilizar atributos personalizados y está utilizando XHTML, sería una buena idea ponerles un nombre de espacio y proporcionar la definición 'xmlns' apropiada como parte del elemento 'html'. Hago esto cada vez que necesito agregar atributos para proporcionar cierta información contextual y hasta ahora ha funcionado bastante bien, especialmente con jQuery. En su lugar, simplemente usaría .attr('ns:name').

Answer 3

Por qué no utilizarlo: su página no se validate on XHTML.

Pero eso depende de cómo vea la validación.

Answer 4

Puede usar el metadata plugin. A continuación, el código HTML se convertiría en:

<span class="{ time:'50', distance:'60'}"></span> 

y su javascript sería:

var data = $('span').metadata(); 
var time = data.time; 
var distance = data.distance; 

De esa manera su margen de beneficio validará y se puede obtener datos en su javascript en el lado del servidor.

corregir: Acaba de notar que ya ha mencionado el complemento de metadatos. Lo siento, me emocioné y acabo de publicar sin leer la pregunta correctamente. Aunque dejaré mi respuesta aquí, en caso de que alguien más la encuentre útil.

Answer 5

La confusión proviene del hecho de que jQuery trata los atributos y las propiedades DOM como la misma cosa, y no lo son. Los atributos son metadatos sobre su marcado; Las propiedades DOM son metadatos sobre objetos DOM. jQuery usa correctamente las propiedades DOM para manipular metadatos sobre objetos DOM que representan elementos de marcado. Utiliza incorrectamente la terminología "atributo" para describir esto.