Najlepsze praktyki dotyczące przechowywania JSON w DOM

Question

Chcę renderować niektóre dane json za pomocą szablonu HTML.

Jeszcze nie zacząłem niczego implementować, ale chciałbym móc "ustawić" wartości danych z json na element html, który zawiera szablon dla jednego rekordu, lub wyrenderować zbiór elementów używając argumentów, które jest szablonem html dla każdego elementu, ale także, aby móc przywrócić obiekt JSON w tym samym formacie, co JSON źródłowy, który był używany do renderowania elementu (chcę, aby mój początkowy JSON zawierał więcej informacji o zachowaniu wiersza rekordu, bez potrzeby zrób wniosek ajax, aby sprawdzić, czy użytkownik może lub nie może zrobić czegoś z tym rekordem, a nie wszystkie te informacje są widoczne w szablonie).

Wiem, że mogę utworzyć ukrytą formę z elementem wejściowym dla każdej właściwości obiektu do przechowywania i funkcją odwzorowania do/z JSON, ale dla mnie brzmi to przesadnie, a ja tego nie lubię, chcę trochę jaśniejszej "koperty".

Zastanawiam się, czy istnieje jakaś biblioteka JS, która może "serializować" i "deserializować" obiekty JSON do html, dzięki czemu mogę przechowywać je gdzieś w DOM (np. W elemencie zawierającym wyświetlacz dla danych, ale chcę być w stanie przechowywać dodatkowe atrybuty, które nie muszą być wyświetlane jako elementy formularza)?

UPDATE W pierwszej odpowiedzi zasugerował przechowywania JSON w zmiennej globalnej, ja też myślałem o tym i moje „najlepsze” rozwiązanie psychicznego było stworzenie modułu JavaScript (lub wtyczki jQuery), który zrobi „mapowanie” JSON do html, a jeśli nie jest możliwe zapisywanie wartości w html, to może przechowywać je w zmiennej wewnętrznej, więc gdy chcę "dostać" dane z elementu html, może pobrać go z lokalnej kopii. Chcę wiedzieć, czy istnieje lepszy sposób na to? Jeśli istnieje jakaś biblioteka przechowująca te informacje w zmiennej, ale w czasie rzeczywistym "wiąże" te dane z html, byłbym z tego bardzo zadowolony.

UPDATE 2 to teraz zrobić za pomocą http://knockoutjs.com/, nie ma potrzeby, aby utrzymać json w DOM anymore, nokaut robi JSON < => HTML mapowanie automatycznie

Answer 1

Dlaczego nie przechowywać go jako charakter przeznaczony: jako obiekt javascript? DOM to okropne miejsce.

To powiedziawszy, jQuery ma data method, która pozwala właśnie to.

Answer 2

Nie sądzę istnieją biblioteki, które przechowują json w dom.

Można renderować HTML przy użyciu danych z json i zachować kopię tej zmiennej json jako zmienną globalną w javascript.

Answer 3

Chcesz zachować odniesienie do danych JSON, które utworzyły obiekt DOMFragment z szablonu?

Załóżmy, że masz funkcję szablonu, która pobiera szablon i dane i zwraca węzeł DOM.

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

Możesz zapisać oryginalny plik Json w zestawie danych węzła. Być może jednak potrzebujesz zestawu danych.

Nie ma również możliwości "odwzorowania" JSON na HTML bez użycia silnika szablonów. Nawet wtedy musiałbyś zapisać nazwę szablonu w danych json (jako metadanych) i to było dla mnie brzydkie.

Answer 4

Zrobiłem to również w przeszłości na kilka różnych sposobów.

Idea $('selector').data jest prawdopodobnie jedną z najbardziej użytecznych technik. Podoba mi się ten sposób przechowywania danych, ponieważ mogę przechowywać dane w sposób logiczny, intuicyjny i uporządkowany.

Załóżmy, że masz wywołanie ajax, które pobiera 3 artykuły po wczytaniu strony. Artykuły mogą zawierać dane dotyczące nagłówka, daty/czasu, źródła itp. Załóżmy, że chcesz wyświetlić nagłówki, a po kliknięciu nagłówka chcesz wyświetlić cały artykuł i jego szczegóły.

Aby zilustrować pojęcie nieco powiedzmy pobierzemy json szuka coś takiego:

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

z wywołania ajax takiego. . .

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

Pomysł polega na tym, że możemy przechowywać powiązane dane z elementem domowym i uzyskać dostęp/manipulować/usuwać te dane później, gdy zajdzie taka potrzeba. Ogranicza to możliwość dodatkowych wywołań danych i skutecznie buforuje dane do określonego elementu dom.

w dowolnym momencie po dodaniu linku nagłówka do danych, do których można uzyskać dostęp za pomocą selektora jquery. Aby uzyskać dostęp do danych artykułów na pierwszy nagłówek:

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

dostęp do danych za pośrednictwem obiektu selektora i jQuery jest jakoś schludny.