在DOM中存储JSON的最佳实践

Question

我想使用HTML模板渲染一些JSON数据。

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

我知道我可以制作具有对象每个属性的隐藏表单和映射器函数来存储，但对我来说听起来有点过度杀伤力，而且我不喜欢它，我想要一些更轻巧的“信封”。

我想知道是否有一些JS库可以将JSON对象序列化和反序列化为HTML，以便我可以将其存储在DOM中的某个位置（即包含数据显示的元素中，但我希望能够存储不必显示为表单元素的其他属性）。 更新 正如第一个答案建议的那样，将JSON存储在全局变量中，我也考虑过这个问题，我的“最佳”解决方案是制作JavaScript模块（或jQuery插件），它可以对JSON进行“映射”以便于html，并且如果无法将值存储在html中，则可以将它们存储在内部变量中，因此当我想要从html元素中“获取”数据时，它可以从其本地副本中提取。我想知道是否有更好的方法？如果有一些库可以将这些信息存储在变量中，并实时将数据与html绑定，我会非常高兴。

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

- Goran Obradovic

---

最佳实践 - “不要将json存储在dom中”，或者-“像Facebook一样”，将其存储在dom的各个地方，例如data-attributes、custom-attributes和hidden divs等。 - c69

Answer 1

为什么不按照自然方式将它存储为javascript对象呢？DOM是可怕的地方。

话虽如此，jQuery提供了data方法，可以实现这一点。

- graphicdivine

---

+1 我认为这适用于HTML5数据属性，因此我可以让服务器呈现初始HTML（除了从JSON和模板创建它之外），然后使用jQuery进行读取/操作。我喜欢这个。 - Goran Obradovic

好的：“自jQuery 1.4.3版本开始，HTML 5数据属性将自动被引入到jQuery的数据对象中。” 所以，是的。 - graphicdivine

很好，那么我认为这是我能得到的最好的东西了。更糟糕的是，我之前就知道 knockout.js 的演示中有 $("..").data 这个方法，但现在没想起来 :) - Goran Obradovic

Telerik网格也使用数据方法来存储网格数据，所以想象一下我给了你另外一个+1 :) - Goran Obradovic

Answer 2

您希望保留从模板创建DOM片段的JSON数据的引用？

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

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

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

另外，没有办法在不使用模板引擎的情况下将JSON映射到HTML。即使使用模板引擎，你仍然需要将模板名称作为元数据存储在JSON数据中，这感觉很丑陋。

- Raynos

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

从这样的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对象访问您的数据非常方便。

- Allen Tellez

---

我喜欢这个，它似乎是一个很好的抽象机制的方式，只有当你需要它时才拥有你需要的东西。你知道这个“数据”真正存储在哪里吗？在一些jQuery变量中，还是将其转换为属性？ - Goran Obradovic

我对它的内部工作机制不太确定，但如果你在处理数据驱动的网站时，它是一个非常好的技术工具。这是 jQuery 文档的链接：http://api.jquery.com/data/ - Allen Tellez

是的，这就是@graphicdivine建议的相同技术，我还没有检查过，但我认为它将属性存储在html中的data-propertyName（或类似名称）属性中。 - Goran Obradovic

Answer 4

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

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

- Mircea Soaica

---

是的，我知道，但如果我能把它们放在一起，我会更开心。 - Goran Obradovic