Je veux rendre certaines données JSON à l'aide de gabarit HTML.
Je n'ai pas encore commencé à implémenter, mais j'aimerais pouvoir "définir" des valeurs de données de JSON à HTML élément qui contient un modèle pour un enregistrement ou pour rendre une certaine collection d'éléments à l'aide de certains arguments. Modèle HTML pour chaque élément, mais aussi pour pouvoir récupérer JSON Object dans le même format que Source Json, utilisé pour rendant l'article (je veux que mon initial JSON contienne plus d'informations sur le comportement de la ligne d'enregistrement, sans qu'il soit nécessaire de faire Demande Ajax de vérifier si l'utilisateur peut ou ne peut pas faire quelque chose avec cet enregistrement, et toutes ces informations sont visibles dans le modèle).
Je sais que je pourrais faire une forme cachée avec un élément d'entrée pour chaque propriété d'objet à stocker et fonctionner au mapper vers / depuis JSON, mais cela ressemble à une surkill pour moi, et je n'aime pas ça, je veux quelque chose "enveloppe" plus claire.
Je me demandais existe une bibliothèque JS qui peut "Serialize" et "désérialiser" des objets JSON dans HTML afin que je puisse le stocker quelque part dans DOM (c'est-à-dire dans l'élément contenant l'affichage pour les données, mais je veux pouvoir stocker Attributs supplémentaires qui ne doivent pas être affichés comme éléments de formulaire)?
update comme première réponse suggérée stocker JSON dans la variable globale, j'ai également pensé à cela, et ma "meilleure" solution mentale était de faire un module JavaScript (ou JQuery Plugin) qui ferait "cartographie "de JSON à HTML, et s'il n'est pas possible de stocker des valeurs dans HTML, il peut donc les stocker en variable interne, donc lorsque je veux" obtenir "des données de HTML, il peut le tirer de sa copie locale. Je veux savoir, y a-t-il un meilleur moyen pour cela? S'il y a une bibliothèque qui stocke ces informations dans une variable, mais une "liaison" en temps réel de ces données avec HTML, je serais très satisfaite avec ça.
update 2 Ceci est maintenant fait en utilisant http://knockoutjs.com/ , pas besoin de garder JSON dans domore plus, knockout fait le json <=> HTML mappant automatiquement
4 Réponses :
Je ne pense pas qu'il y ait des bibliothèques qui stockent JSON dans DOM.
Vous pouvez rendre le HTML à l'aide des données de JSON et conserver une copie de cette variable JSON en tant que variable globale en JavaScript.
Oui, je sais que, mais je serais plus heureux si je pouvais l'avoir ensemble.
Pourquoi ne pas le stocker comme la nature prévue: comme objet JavaScript? Le DOM est un endroit horrible.
Cela dit, JQuery a le Méthode de données qui permet de simplement cela.
+1 Je suppose que cela fonctionne avec des attributs de données HTML5, je peux donc avoir le HTML initial également rendu par serveur (en plus de la créer à partir de JSON et de modèle) et de lire / le manipuler ultérieurement à l'aide de jQuery? J'aime ça.
Eh bien: "AS de JQuery 1.4.3 HTML 5 Les attributs de données seront automatiquement tirés dans l'objet de données de JQuery." Donc oui.
Génial, alors je pense que c'est le meilleur que je puisse obtenir pour ce dont j'ai besoin. Et qu'est-ce que c'est pire, je connaissais ce $ (".."). Données de Knockout.js Démos, mais cela ne m'a pas eu maintenant :)
Telerik Grid utilise également la méthode de données pour stocker des données de grille, alors imaginez que je vous ai donné un autre +1 :)
Vous voulez donc conserver 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 nœud DOM. P>
var node = template(tmpl, json); node.dataset.origJson = json; node.dataset.templateName = tmpl.name;
Je l'ai fait dans le passé aussi bien de différentes manières.
Le Disons que vous avez un appel AJAX qui récupère 3 articles sur la charge de la page. Les articles peuvent contenir des données relatives au titre, à la date / heure, à la source, etc. supposons en outre que vous souhaitez afficher les titres et lorsqu'un titre est cliqué, vous souhaitez afficher l'article complet et ses détails. P> Pour illustrer le concept un peu disons que nous récupérons JSON cherche quelque chose comme: p> d'un appel Ajax comme celui-ci. . . P> $ («sélecteur»). Données code> L'idée est probablement l'une des techniques les plus utiles. J'aime cette façon de stocker des données car je peux stocker les données de manière logique, intuitive et ordonnée. P> $('#headlines .headline:first()').data.article.headline
$('#headlines .headline:first()').data.article.article
$('#headlines .headline:first()').data.article.source
$('#headlines .headline:first()').data.article.date
J'aime ça, cela semble être un excellent moyen de résumé mécanisme derrière cela et d'avoir ce dont vous avez besoin, quand vous en avez besoin. Savez-vous où ces "données" sont vraiment stockées? Dans une variable de jQuery, ou cela le convertit aux attributs?
Je ne suis pas sûr du fonctionnement intérieur, mais c'est un excellent outil d'avoir dans votre arsenal de techniques si vous travaillez avec des sites Web donnés sur des données. Voici le lien vers la documentation JQuery API.JQUERY.COM/DATA
Oui, c'est la même technique que suggérée par @graphicdivine, je n'ai pas encore vérifié, mais je pense que cela stocke des propriétés dans les attributs de la propriété de données (ou quelque chose comme ça) dans HTML.
Meilleure pratique - "Ne pas stocker JSON dans DOM", ou - "Soyez comme Facebook" - et stockez-le partout dans DOM, - dans les attributs de données, dans les attributs personnalisés, dans des divs cachés ..