Рекомендации по хранению JSON в DOM

Я хочу отобразить некоторые данные json с помощью шаблона HTML.

Я не приступил к реализации еще ничего, но я хотел бы быть в состоянии "набор" значений данных из формата JSON в HTML-элемент, который содержит шаблон для одной записи, или, чтобы представить некоторый набор элементов, используя некоторые аргумент, который является HTML шаблон для каждого элемента, но также быть в состоянии получить JSON-объект обратно в тот же формат в качестве источника данных JSON, который был использован для отображения элемента (я хочу, чтобы мой первоначальный JSON, чтобы содержать более информация о поведении строки записи, без необходимости делать запрос ajax, чтобы проверить, может ли пользователь что-то сделать с этой записью, и не вся эта информация отображается в шаблоне).

Я знаю, что я мог бы сделать скрытую форму с элементом ввода для каждого свойства объекта для хранения и функции mapper Для/из JSON, но для меня это звучит как перебор, и мне это не нравится, я хочу более легкий "конверт".

Мне было интересно, есть ли библиотека JS, которая может "сериализовать" и "десериализовать" объекты JSON в html, чтобы я мог хранить их где-то в DOM (т. е. в элементе, который содержит отображение данных, но я хочу иметь возможность хранить дополнительные атрибуты, которые не должны отображаться как элементы формы)?

обновление поскольку первый ответ предложил хранить JSON в глобальной переменной, я также подумал об этом, и моим" лучшим "ментальным решением было сделать модуль JavaScript (или плагин jQuery), который будет делать "отображение" JSON в html, и если невозможно сохранить значения в html, тогда он может хранить их во внутренней переменной, поэтому, когда я хочу "получить" данные из html-элемента, он может вытащить его из своей локальной копии. Я хочу знать, есть ли лучший способ для этого? Если есть какая-то библиотека, которая хранит эту информацию в переменной, но в режиме реального времени "связывает" эти данные с html, я был бы очень доволен этим.

обновление 2 теперь это делается с помощью http://knockoutjs.com/, отсутствие потребности держать json в DOM больше, нокаут делает отображение JSON HTML автоматически

8
dom html javascript json

4 ответов

Почему бы не сохранить его как предназначенный природой: как объект javascript? Дом-ужасное место.

Что сказал, jQuery имеет способ данных это позволяет только это.

12

Итак, вы хотите сохранить ссылку на данные JSON, которые создали ваш DOMFragment из шаблона?

предположим, у вас есть функция шаблона, которая принимает шаблон и данные и возвращает узел DOM.

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

вы можете сохранить исходный json в наборе данных узла. Однако вам может понадобиться прокладка dataset.

также нет способа "сопоставить" JSON с HTML без использования механизма шаблонов. Даже тогда вам придется сохранить имя шаблона в json данные (как метаданные), и это кажется мне уродливым.

2

Я делал это в прошлом, а также в несколько различных способов.

на $('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 является своего рода аккуратным.

2

Я не думаю, что есть библиотеки, которые хранят json в dom.

вы можете отобразить html, используя данные из json, и сохранить копию этой переменной json в качестве глобальной переменной в javascript.

0