Meilleures pratiques pour stocker JSON dans DOM

Je souhaite rendre certaines données json en utilisant un modèle HTML.

Je n'ai pas encore commencé à mettre en œuvre, mais j'aimerais pouvoir "définir" les valeurs des données de json vers l'élément html qui contient un modèle pour un enregistrement ou pour rendre une collection d'éléments utilisant un argument qui est le modèle html pour Chaque élément, mais aussi pour pouvoir récupérer l'objet JSON dans le même format que la source JSON qui a été utilisée pour rendre l'élément (je souhaite que mon JSON initial contienne plus d'informations sur le comportement de la ligne d'enregistrement, sans avoir besoin de faire une requête ajax pour Vérifiez si l'utilisateur peut ou ne peut pas faire quelque chose avec cet enregistrement, et toutes ces informations ne sont pas visibles dans le modèle).

Je sais que je pourrais créer une forme cachée avec un élément de saisie pour chaque propriété de l'objet à mémoriser, et la fonction de mappeur à partir de JSON, mais cela me semble trop marqué, et je n'aime pas ça, je veux une enveloppe plus légère ".

Je me demandais s'il y a une bibliothèque JS qui peut "sérialiser" et "désérialiser" les objets JSON dans html afin que je puisse le stocker quelque part dans le DOM (c'est-à-dire dans l'élément qui contient l'affichage des données, mais je veux pouvoir stocker des attributs supplémentaires qui Ne doivent pas être affichés sous forme d'éléments de formulaire)?

MISE À JOUR Comme première réponse a suggéré de stocker JSON dans la variable globale, j'ai également pensé à cela, et ma meilleure solution mentale était de créer un module JavaScript (ou jQuery plugin) qui ferait "mapping" de JSON à html et si possible Pour stocker des valeurs dans html puis il peut les stocker dans la variable interne, alors quand je veux "obtenir" les données de l'élément html, il peut l'extraire de sa copie locale. Je veux savoir, y a-t-il un meilleur moyen de le faire? S'il y a une bibliothèque qui stocke cette information en variable, mais qui est en temps réel "liant" ces données avec html, je serais très contente de cela.

MISE À JOUR 2 Ceci est maintenant fait en utilisant http://knockoutjs.com/ , pas besoin de garder json dans DOM plus, knockout le JSON <=> cartographie HTML automatiquement

Pourquoi ne pas le stocker comme une nature destinée: en tant qu'objet javascript? Le DOM est un endroit horrible.

Cela dit, jQuery a la méthode de données qui permet tout cela.

Je l'ai déjà fait dans le passé de deux manières différentes.

L'idée de $('selector').data est probablement l'une des techniques les plus utiles. J'aime cette façon de stocker des données parce que je peux stocker les données de manière logique, intuitive et ordonnée.

Disons que vous avez un appel ajax qui récupère 3 articles sur le chargement de la page. Les articles peuvent contenir des données relatives au titre, à la date / à l'heure, à la source, etc. Supposons que vous souhaitiez montrer les titres et lorsque vous cliquez sur un titre vous souhaitez afficher l'article complet et ses détails.

Pour illustrer le concept, on dit que nous récupérons json en regardant quelque chose comme:

 { articles: [ { headline: 'headline 1 text', article: 'article 1 text ...', source: 'source of the article, where it came from', date: 'date of the article' }, { headline: 'headline 2 text', article: 'article 2 text ...', source: 'source of the article, where it came from', date: 'date of the article' }, { headline: 'headline 3 text', article: 'article 3 text ...', source: 'source of the article, where it came from', date: 'date of the article' } ] }

D'un appel ajax comme celui-ci. . .

 $.ajax({ url: "news/getArticles", data: { count: 3, filter: "popular" }, success: function(data){ // check for successful data call if(data.success) { // iterate the retrieved data for(var i = 0; i < data.articles.length; i++) { var article = data.articles[i]; // create the headline link with the text on the headline var $headline = $('<a class="headline">' + article.headline + '</a>'); // assign the data for this article's headline to the `data` property // of the new headline link $headline.data.article = article; // add a click event to the headline link $headline.click(function() { var article = $(this).data.article; // do something with this article data }); // add the headline to the page $('#headlines').append($headline); } } else { console.error('getHeadlines failed: ', data); } } });

L'idée étant que nous pouvons stocker les données associées à un élément dom et accéder / manipuler / supprimer ces données plus tard si nécessaire. Ceci réduit les éventuels appels de données supplémentaires et met en cache les données en un élément dom spécifique.

Chaque fois que le lien du titre est ajouté au document, les données peuvent être consultées via un sélecteur jquery. Pour accéder aux données de l'article pour le premier titre:

 $('#headlines .headline:first()').data.article.headline $('#headlines .headline:first()').data.article.article $('#headlines .headline:first()').data.article.source $('#headlines .headline:first()').data.article.date

L'accès à vos données via un objet sélecteur et jquery est sorta.

Vous souhaitez donc garder une référence aux données JSON qui ont créé votre DOMFragment à partir d'un modèle?

Disons que vous avez une fonction de modèle qui prend un modèle et des données et renvoie un noeud DOM.

 var node = template(tmpl, json); node.dataset.origJson = json; node.dataset.templateName = tmpl.name;

Vous pouvez mémoriser le json original sur l'ensemble de données d'un nœud. Vous pourriez avoir besoin d'un jeu de données.

Il n'y a pas non plus de moyen de "mapper" JSON à HTML sans utiliser un moteur de modèle. Même alors, vous devriez stocker le nom du modèle dans les données json (en tant que méta-données) et cela me paraît moche.

Je ne pense pas qu'il existe des bibliothèques qui stockent json in dom.

Vous pouvez rendre le html en utilisant les données de json et conserver une copie de cette variable json en tant que variable globale en javascript.