在 DOM 中存储 JSON 的最佳实践

Question

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

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

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

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

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

更新 2 现在使用 http://knockoutjs.com/ 完成，不再需要将 json 保留在 DOM 中，Knout 会自动进行 JSONHTML 映射

Answer 1

我过去也以几种不同的方式这样做过。

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

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

为了说明这个概念，假设我们检索的 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'
        }
    ]
}

来自这样的 ajax 调用。 . .

$.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 2

所以您想保留对从模板创建您的DOMFragment 的JSON 数据的引用？

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

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

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

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

Answer 3

为什么不将其存储为自然预期：作为 javascript 对象？ DOM 是个可怕的地方。

也就是说，jQuery 有 data method 允许这样做。

Answer 4

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

您可以使用来自 json 的数据呈现 html，并将该 json 变量的副本保留为 javascript 中的全局变量。