Question

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

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

我知道我可以使用输入元素为每个要存储的对象的属性创建隐藏的表单，并将映射器函数发送到/来自JSON，但这对我来说听起来有点过分，我不喜欢这样，我想要一些更轻的“信封”。

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

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

UPDATE 2 现在使用http://knockoutjs.com/完成，无需再将DOM保留在DOM中，淘汰赛自动执行JSON＆lt; =＆gt; HTML映射

Answer 1

为什么不把它存储为大自然：作为javascript对象？ DOM是一个可怕的地方。

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

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

来自这样的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 4

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

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

在DOM中存储JSON的最佳实践

4 个答案: