在 DOM 中存储 JSON 的最佳实践

Question

我想使用 HTML 模板呈现一些 json 数据。

我还没有开始实现任何东西，但我希望能够将数据值从 json“设置”为包含一条记录模板的 html 元素，或者使用某个参数（模板 html）来呈现一些项目集合每个项目，而且还能够以与用于呈现项目的源 JSON 相同的格式获取 JSON 对象（我希望我的初始 JSON 包含有关记录行行为的更多信息，而不需要向检查用户是否可以用它做某事记录，并且并非所有这些信息在模板中可见）。

我知道我可以为要存储的对象的每个属性创建一个带有输入元素的隐藏表单，以及与 JSON 之间的映射器函数，但这对我来说听起来有点过头了，我不喜欢这样，我想要一些更轻的“信封” ”。

我想知道是否有一些 JS 库可以将 JSON 对象“序列化”和“反序列化”为 html，这样我就可以将其存储在 DOM 中的某个位置（即包含数据显示的元素中，但我希望能够存储其他属性）不必显示为表单元素）？

更新 由于第一个答案建议将 JSON 存储在全局变量中，我也考虑过这一点，我的“最佳”心理解决方案是制作 JavaScript 模块（或 jQuery 插件），它可以对 JSON 进行“映射”到 html，如果不可能在 html 中存储值，那么它可以将它们存储在内部变量中，所以当我想从 html 元素“获取”数据时，它可以从其本地副本中提取数据。我想知道有更好的方法吗？如果有一些库将该信息存储在变量中，但将该数据与 html 进行实时“绑定”，我会非常高兴。

更新2现在使用http://knockoutjs.com/完成，不再需要在DOM中保留json ，knockout 自动进行 JSON<=>HTML 映射

Answer 1

为什么不按照自然的方式存储它：作为 JavaScript 对象？ DOM 是一个可怕的地方。

也就是说，jQuery 有 data 方法 可以实现这一点。

Answer 2

那么您想保留对从模板创建 DOMFragment 的 JSON 数据的引用吗？

假设您有一个模板函数，它接受模板和数据并返回 DOM 节点。

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

您可以将原始 json 存储在节点的数据集上。不过，您可能需要一个数据集垫片。

如果不使用模板引擎，也无法将 JSON“映射”为 HTML。即使如此，您也必须将模板名称存储在 json 数据中（作为元数据），这对我来说感觉很难看。

Answer 3

我过去也通过几种不同的方式做到了这一点。

$('selector').data 想法可能是最有用的技术之一。我喜欢这种存储数据的方式，因为我可以以逻辑、直观和有序的方式存储数据。

假设您有一个 ajax 调用，在页面加载时检索 3 篇文章。这些文章可能包含与标题、日期/时间、来源等相关的数据。让我们进一步假设您想要显示标题，并且当单击标题时您想要显示完整的文章及其详细信息。

为了稍微说明一下这个概念，假设我们检索类似于这样的 json：

{
    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'
        }
    ]
}

From an ajax call like this 。 。 。

$.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);
        }
    }
});

这个想法是我们可以将关联数据存储到 dom 元素，并在以后需要时访问/操作/删除该数据。这减少了可能的额外数据调用，并有效地将数据缓存到特定的 dom 元素。

将标题链接添加到文档后，随时可以通过 jquery 选择器访问数据。要访问第一个标题的文章数据：

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

通过选择器和 jquery 对象访问数据非常简洁。

Answer 4

我不认为有任何库在 dom 中存储 json。

您可以使用 json 中的数据渲染 html，并保留该 json 变量的副本作为 javascript 中的全局变量。