2009-06-01 10 views
8

Estoy trabajando en una aplicación web que usa ajax para comunicarse con el servidor. Mi situación específica es la siguiente:html & javascript: Cómo almacenar datos referentes a elementos html

Tengo una lista de usuarios forrados en la página html. En cada uno de estos usuarios puedo hacer lo siguiente: cambiar su 'estado' o 'eliminarlos' de la cuenta.

¿Qué es una buena práctica para almacenar información en la página sobre el siguiente:

  • la identificación del usuario
  • el estado actual del usuario

P.S .: Estoy usando jQuery.

Respuesta

5

Tal vez el uso de atributos personalizados, por lo que para el elemento de la lista de un usuario, añadir atributos de las variables:

<li uid="theuserid" ustatus="thestatus"></li> 

Los valores a continuación, se puede conseguir con la función attr:

$("li").attr("uid") 

Y

$("li").attr("ustatus") 

Nota: Los selectores wil Necesito ser cambiado, obviamente

Tenga en cuenta que hay opiniones diferentes sobre el uso de atributos personalizados, sin embargo, esto debería estar bien para todos los principales navegadores. También es la solución menos compleja que se me ocurre. No es necesario saltar a los elementos hermanos para obtener datos, o encontrar elementos cercanos, que pueden agregar una pequeña cantidad de sobrecarga al procesamiento. Trato de minimizar la cantidad de exceso de inflamación que agrego al DOM cuando hago tales cosas.

+1

atributos personalizados trabajo, pero no son compatibles con XHTML –

+1

Sí, pero cuando se llega a esto, lo que es más deseable - algo que funciona, y es bastante rápida, o algo que es ¿obediente? – Kazar

+0

@activa y @Kazar ¿Por qué no cumplir y desear con el complemento de metadatos? –

1

Existen varias formas de hacerlo, dependiendo del tipo de datos que está almacenando y de la cantidad de información que está almacenando en la página en general. Lo mejor es diseñar un esquema coherente para que pueda escribir una simple llamada a la biblioteca para hacer el trabajo. Por ejemplo,

Puede almacenar datos en la clase de un elemento en particular. Esto puede requerir elementos de contenedor adicionales para poder proporcionar una clase adicional para conducir su CSS. Esto también restringe el formato de contenido almacenable. La identificación del usuario puede encajar en un atributo de clase.

Puede almacenar datos en un href no utilizado de un enlace activado por Javascript. Esto tiene la característica adicional de mostrar los datos en la barra de estado como parte de la URL en rollover. Por ejemplo, puede almacenar '#userid' o incluso solo 'userid' en el href.

Puede almacenar datos en elementos adicionales. Por ejemplo, puede tener un div anidado con una clase que indique almacenamiento, que también activa CSS para sacar el elemento de la pantalla. Este es el soporte más general y extenso que probablemente pueda organizar en la página.

En lugar de un div anidado, también puede usar etiquetas de entrada anidadas con tipo = "oculto". Esto es algo más esperado/tradicional y no requiere CSS para sacarlos de la pantalla. Puede usar el atributo id para identificar estas entradas, o puede usar la ubicación en la página. Por ejemplo, colóquelos dentro del enlace en el que el usuario hace clic y luego simplemente busque dentro del enlace actual en el controlador onclick.

5

jQuery datos

Si desea almacenar los datos personalizados contra un objeto jQuery, utilice el data function.

$('#myField').data('name', 'Jack'); 
var name = $('#myField').data('name'); 

HTML5 Data- * Atributos

También puede utilizar los atributos de HTML5 data-*, aunque las APIs para acceder a éstos sólo se admiten parcialmente por los diferentes navegadores. Here's some more information about that.

<div data-userid="123" class="user-row"> 

programación:

$('#myElement').attr('data-fruit', 'apple'); 
// or 
document.getElementById('myElement').dataset.fruit = 'apple'; 

campos ocultos

Si usted quiere hacer las cosas de la vieja manera compatible con el explorador y esas cosas los metadatos directamente en el html, puede utilizar campos ocultos . Es un poco más crudo pero lo suficientemente fácil de hacer.

<input type="hidden" name="UserID" value="[userid]" /> 

Usted puede utilizar fácilmente jQuery selectors para consultar su lista y encontrar bloques de HTML que contienen objetos de usuario que tienen los campos ocultos relevantes que coinciden con los metadatos se está consultando a.

+0

Acepto ... si está en JavaScript, use la función de datos jQuery. Si se trata de HTML puro, este método es mejor que los atributos HTML prefijados o personalizados de "datos", ya que no son completamente compatibles en todos los navegadores. Además, apestan. La etiqueta de entrada oculta es una solución horrible, pero probablemente sea la mejor solución y aún compatible con XHTML. – BMiner

17

No es función de los datos de jQuery

$('li').data('userid',uid); // sets the value of userid 
uid = $('li').data('userid'); // retrieves the value of userid 

documentación oficial: http://docs.jquery.com/Data

+7

Si bien estoy de acuerdo en que la función de datos es un buen método para almacenar datos en esos elementos dom, todavía existe el problema de obtener esa información en primer lugar del servidor. – Kazar

+1

Esa es mi preocupación también ... Todavía necesito una forma de 'identificar' el elemento dom para poder adjuntar datos. Además, creo que necesito mantener una estructura javascript separada para almacenar todos los valores iniciales. – Dan

+1

Ok, no me di cuenta del alcance de su problema. Eche un vistazo a la respuesta de TM. – Rob

2

En este caso, creo que los atributos personalizados pueden ser excesivos. Puede almacenar el ID de usuario en el id -attribute, ya que solo habrá una instancia del usuario en la lista, ¿verdad? Además, el estado del usuario se puede almacenar en la clase -attribute. De esta forma, a cada usuario se le puede dar un estilo diferente en CSS, como verde para activo, amarillo para una cuenta no activada y rojo para una cuenta suspendida.

El código para obtener el estado, sin embargo, será un poco más complejo en comparación con el uso de un atributo personalizado (pero solo si también desea tener múltiples clases). En una nota más positiva, el HTML se validará con este enfoque, mientras que no lo haría con los atributos personalizados.

<ul id="userList"> 
    <li id="uid123" class="active">UserName X</li> 
    <li id="uid456" class="suspended">Mr. Troll</li> 
</ul> 

/** 
* Simple function for searching (strict) for a value in an array 
* @param array arr The array to look in 
* @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison 
* @return boolean true if val is found in arr, else false 
*/ 
function searchArray(arr, val) { 
    for(var i = 0, len = arr.length; i < len; i++) { 
     if(arr[i] === val) { 
      return true; 
     } 
    } 
    return false; 
} 

/** 
* Gets a known status from a string of class names. Each class name should be separated 
* by a space. 
* @param string classNames The string to check for a known status 
* @return string|false The status if found in classNames, else false 
*/ 
function getStatus(classNames) { 
    // The different statuses a user can have. Change this into your own! 
    var statuses = ['active', 'suspended', 'inactive'], 
     nameArr = classNames.split(" "); 
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) { 
     // If we find a valid status among the class names, return it 
     if(searchArray(statuses, nameArr[i])) { 
      return nameArr[i]; 
     } 
    } 
    return false; // We didn't find any known status in classNames 
} 

var id = $("li").attr("id"); // Fetches the id for the first user 
var status = getStatus($("li").attr("class")); // Fetches the status of the first user 
+0

¿Por qué me rechazaron? El código funciona, y he suministrado una función para extraer el estado del atributo de clase, incluso si hay otras clases presentes ... SI eso no es deseado, simplemente elimine la función getStatus. – PatrikAkerstrand

+0

No puede verificar la validez de un estado en el lado del cliente. Puede usar CSS para dar pistas visuales sobre un estado apropiado, ya que ya usa atributos de clase. Pero tu javascript es básicamente inútil. – Rob

+1

Lo mismo podría decirse sobre cualquiera de las soluciones dadas aquí. No importa si el estado se almacena en un atributo de clase o atributo personalizado. Todavía tiene que ser validado por el lado del servidor. Lo que quise decir es que extraerá un estado "conocido" de una cadena de nombres de clases. No soy un hablante nativo de inglés, así que supongo que fue una frase desafortunada en mi publicación. – PatrikAkerstrand

1

Para responder a la cuestión de "cómo conseguir en el documento en primer lugar", sugiero un diseño similar a esto:

<ul id="users"> 
    <li id="someUserId" class="someStatus">Some Username</li> 
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li> 
</ul> 

Esto le permite seleccionar fácilmente una gran cantidad de información sobre sus usuarios:

$('#users > li') // all user elements 
$('.someStatus') // all users of a particular status 

Luego, en sus controladores de eventos también es fácil de obtener el estado actual:

$(this).attr('class') //get current status once you have a user element selected. 

Otra alternativa es volcar javascript en la página y simplemente hacer que use la funcionalidad jquery data para almacenar los datos tan pronto como se cargue la página. Todavía necesitarías una identificación en el elemento para encontrar la correcta.

2

El plugin metadata para jquery es su respuesta.

<html > 
<head> 
<script src="/js/jquery-1.3.2.js"></script> 
<script src="/js/jquery.metadata.js"></script> 
</head> 
<body> 
<ul> 
<li type="text" class="{UID:'1',status:'alive'}">Adam</li> 
<li type="text" class="{UID:'2',status:'alive'}">Bob</li> 
<li type="text" class="{UID:'3',status:'alive'}">Carol</li> 
</ul> 
<script> 
$('li').each(function(){window.console.log($(this).metadata().UID)}); 
</script> 
</body> 
</html> 
8

Existe un gran debate sobre qué es lo mejor para usar. Puede almacenar los datos de muchas maneras, y todos hacen feliz a alguien: los atributos personalizados, por supuesto, no se validarán si usa XHTML, y el uso de clases para almacenar uno o dos bits de datos es torpe en el mejor de los casos y solo empeora con el cantidad de cosas que quieres saber Personalmente, no solo no soy un gran fanático de XHTML, sino que tampoco soy muy valioso nazi, así que recomiendo ir con los atributos personalizados.

Sin embargo, existe una opción que reconcilia los atributos personalizados con los estándares: data- atributos. Como John Resig (el autor de jQuery) writes about in his blog, este es un nuevo atributo introducido en HTML5 que le permite especificar custom data attributes con el prefijo data-. Por lo que un elemento perfectamente válido podría tener este aspecto:

<ul> 
    <li data-userid='5' data-status='active'>Paolo Bergantino</li> 
</ul> 

Esto tiene el aspecto positivo que mientras que usted todavía está utilizando atributos personalizados, que puede ser malo si está utilizando XHTML, el código se va a envejecer muy bien como esta es la forma en que almacenaremos los datos relacionados con un artículo en particular en el futuro.

leer un poco más es Attributes > Classes: Custom DOM Attributes for Fun and Profit.

Cuestiones relacionadas