148 votes

Magasin d'objet JSON dans les données de l'attribut HTML jQuery

Je suis faire récit de données à l'aide de données de la démarche à l'HTLM balise comme ceci:

<td><"button class='delete' data-imagename='"+results[i].name+"'>Delete"</button></td>

Je suis ensuite récupérer les données dans un rappel comme ceci:

$(this).data('imagename');

Cela fonctionne bien. Ce que je suis coincé à l'est d'essayer d'économiser de l'objet au lieu de simplement l'une des propriétés. J'ai essayé de faire ceci:

<td><button class='delete' data-image='"+results[i]+"'>Delete</button></td>

Ensuite, j'ai essayé d'accéder à la propriété de nom comme ceci:

var imageObj = $(this).data('image');
console.log('Image name: '+imageObj.name);

Le journal me dit undefined. Donc il semble que je peux stocker des chaînes simples dans les attributs data - mais je ne peux pas stocker des objets JSON...

J'ai aussi essayé d'utiliser ce gamin de syntaxe, pas de chance:

<div data-foobar='{"foo":"bar"}'></div>

Aucune idée sur la façon de stocker un objet dans la balise HTML à l'aide de données - approche?

169voto

Glauber Rocha Points 1037

En fait, votre dernier exemple:

<div data-foobar='{"foo":"bar"}'></div>

semble bien fonctionner (voir http://jsfiddle.net/GlauberRocha/Q6kKU/).

La bonne chose est que la chaîne de caractères dans la base de données de l'attribut est automatiquement converti en un objet JavaScript. Je ne vois pas d'inconvénient dans cette approche, au contraire! Un attribut est suffisant pour stocker un ensemble de données, prêt à l'emploi dans le code JavaScript via les propriétés de l'objet.

(Note: pour les données d'attributs pour être automatiquement le type de l'Objet plutôt que de Chaîne, vous devez être attentif à écrire JSON valide, en particulier pour joindre les noms de clés entre guillemets).

150voto

nathan gonzalez Points 5866

au lieu de l'intégrer dans le texte qui vient d'utilisation $('#myElement').data('key',jsonObject);

il ne sera pas effectivement être stockées dans le code html, mais si vous êtes à l'aide de jquery.de données, tout ce qui est abstrait de toute façon.

13voto

molokoloco Points 1626

Pour moi, il travail comme ça, comme j'ai besoin de le stocker dans le modèle...

// Generate HTML
var gridHtml = '<div data-dataObj=\''+JSON.stringify(dataObj).replace(/'/g, "\\'");+'\'></div>';

// Later
var dataObj = $('div').data('dataObj'); // jQuery automatically unescape it

-1voto

Brig Points 2457

Vous pourriez essayer d' eval pour le JSON

var data = eval('(' + $(".delete").attr("data") + ')');

Bien que beaucoup de gens disent eval est du diable.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X