Prépopulation de données jQuery en html

Question

jQuery a la caractéristique/méthode très ".data", je me demande s'il y a un moyen d'avoir les données dans le code pour que jQuery puisse l'utiliser quand le rendu de html est fait. Supposons que je possède un répéteur et que je boucle des enfants, et que je souhaite ajouter des données à ces enfants sans utiliser de classes, etc. Devrai-je ajouter javascript à ce répéteur pour ajouter des choses aux "données de jquery"? façon?

Answer 1

Il est le metadata plugin qui pourrait faire ce que vous parlez

Par exemple, vous pouvez faire: (Vous pouvez choisir parmi différents formats en définissant une option)

<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> 

Après cela, vous pouvez simplement faire:

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

Answer 2

HTML 5 a une nouvelle norme pour les attributs commençant par "données-". Voir ici link text.

Vous pouvez l'utiliser pour stocker des données et utiliser un sélecteur pour analyser les données.

Answer 3

Pensez-vous "quel meilleur endroit pour stocker les données d'un objet que sur l'élément lui-même"?

Par exemple, vous avez un bol de fruits?

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] 

Maintenant vous rendez le bol de fruits sur la page?

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

Ok. Maintenant, vous pouvez ajouter l'objet à l'élément trivialement en changeant la dernière ligne et fixer l'objet de fruits réels à leurs Rendus éléments ainsi:

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

Ce qui rend sacrément facile d'accéder aux données lorsqu'un événement se produit . Par exemple changer la routine de rendu pour inclure un événement click:

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

Maintenant, on peut facilement dire qu'il est stupide de dupliquer l'objet en l'attachant aux éléments de cette façon, puisque vous avez déjà l'objet à la fois, dans le cadre du script, et si vous l'écrivez correctement, à l'intérieur de la fermeture de l'objet. Et ce sont probablement des arguments valables. Mais cela, je suis d'accord, est plutôt cool :-)