Datos JQuery rellenos previamente en html

Question

jQuery tiene la función/método muy genial ".data", me pregunto si hay una forma de tener los datos en el código para que jQuery pueda usarlos cuando se termine la renderización de html. Supongamos que tengo un repetidor y un bucle para niños, y quiero agregar algunos datos a esos niños sin usar clases, etc. ¿Tendré que agregar javascript a ese repetidor solo para agregar cosas a los "datos de jquery" o hay algún mejor ¿camino?

Answer 1

No es el metadata plugin que podría hacer lo que está hablando

Por ejemplo, se puede hacer: (Usted puede elegir entre diferentes formatos mediante el establecimiento de una opción)

<li class="someclass {some: 'data'} anotherclass">...</li> 
OR 
<li data="{some:'random', json: 'data'}">...</li> 
OR 
<li><script type="data">{some:"json",data:true}</script> ...</li> 
OR 
<li data-some="'random'" data-json="'data'">...</li> 

Después de que pueda simplemente hacer:

var data = $('li.someclass').metadata(); 
if (data.some && data.some == 'data') 
    alert('It Worked!'); 

Answer 2

HTML 5 tiene un nuevo estándar para los atributos que comienzan con "Data-". Vea aquí link text.

Puede usar esto para almacenar datos y usar un selector para analizar los datos.

Answer 3

¿Estás pensando "qué mejor lugar para almacenar los datos de un objeto que en el elemento en sí"?

Por ejemplo, ¿tiene un tazón de fruta?

function Fruit(name, color){ 
    this.name = name 
    this.color = color 
} 
var apple = new Fruit("apple", "red") 
var orange = new Fruit("orange","orange") 
var bowl = [apple, orange] 

¿Ahora representa el frutero en la página?

Fruit.prototype.render = function(){ 
    return createElement('li').html(this.name) 
} 
$.each(bowl, function(i, fruit){ 
    $('#fruitbowl').append(fruit.render()) 
} 

Ok. Ahora puede agregar el objeto al elemento trivial cambiando la última línea y adjuntar el objeto fruta real a sus representaciones de elementos así:

 $('#fruitbowl').data('obj', fruit).append(fruit.render()) 

que hace que sea bastante maldito fácil de acceder a los datos cuando se produce un evento . Por ejemplo, cambiar la rutina renderizado para incluir un evento de clic:

Fruit.prototype.render = function(){ 
    var el = createElement('li').html(this.name) 
    el.click(function(){ 
     alert('You clicked on an ' + $(this).data('obj').name) 
    } 
} 

Ahora uno puede fácilmente argumentar que es tonto para duplicar el objeto de su anexión a los elementos de esta manera, puesto que ya tiene el objeto al mismo tiempo, en el alcance de la secuencia de comandos, y si lo escribe bien, dentro del cierre del objeto. Y estos son probablemente argumentos válidos. Pero esto, estoy de acuerdo, es genial :-)