Các phương pháp hay nhất để lưu trữ JSON trong DOM

Question

Tôi muốn hiển thị một số dữ liệu json bằng cách sử dụng mẫu HTML.

Tôi chưa bắt đầu triển khai, nhưng tôi muốn có thể "đặt" các giá trị dữ liệu từ json thành phần tử html chứa mẫu cho một bản ghi hoặc để hiển thị một số mục bằng cách sử dụng một số đối số là mẫu html cho mỗi mục, nhưng cũng có thể lấy đối tượng JSON ở định dạng giống như JSON nguồn đã được sử dụng để hiển thị mục (tôi muốn JSON ban đầu của tôi chứa một số thông tin khác về hành vi của hàng bản ghi mà không cần thực hiện yêu cầu ajax để kiểm tra xem người dùng có thể hoặc không thể làm điều gì đó với bản ghi này và không phải tất cả thông tin này đều hiển thị trong mẫu).

Tôi biết rằng tôi có thể tạo biểu mẫu ẩn với yếu tố đầu vào cho mỗi thuộc tính của đối tượng để lưu trữ và chức năng ánh xạ tới/từ JSON, nhưng có vẻ như quá mức đối với tôi và tôi không thích điều đó một số "phong bì" nhẹ hơn. Tôi đã tự hỏi là có một số thư viện JS có thể "serialize" và "deserialize" JSON đối tượng vào html để tôi có thể lưu nó ở đâu đó trong DOM (tức là trong phần tử có chứa dữ liệu, nhưng tôi muốn để có thể lưu trữ các thuộc tính bổ sung mà không cần phải được hiển thị dưới dạng các phần tử biểu mẫu)? Khi câu trả lời đầu tiên đề xuất lưu trữ JSON trong biến toàn cục, tôi cũng đã nghĩ về điều đó, và giải pháp tinh thần "tốt nhất" của tôi là tạo mô-đun JavaScript (hoặc plugin jQuery) sẽ "lập bản đồ" JSON html, và nếu không thể lưu trữ các giá trị trong html thì nó có thể lưu trữ chúng trong biến nội bộ, vì vậy khi tôi muốn "lấy" dữ liệu từ phần tử html nó có thể kéo nó từ bản sao cục bộ của nó. Tôi muốn biết là có cách nào tốt hơn cho việc này? Nếu có một số thư viện lưu trữ thông tin này trong biến, nhưng thực hiện "ràng buộc" thời gian thực của dữ liệu đó bằng html, tôi sẽ rất hài lòng với điều đó.

UPDATE 2 JSON lập bản đồ này bây giờ được thực hiện sử dụng http://knockoutjs.com/, không cần phải giữ json trong DOM nữa, loại trực tiếp thực hiện < => HTML tự động

Answer 1

Tại sao không lưu trữ như bản chất dự định: dưới dạng đối tượng javascript? DOM là một nơi kinh khủng.

Điều đó nói rằng, jQuery có data method chỉ cho phép điều này.

Answer 2

Tôi không nghĩ rằng có bất kỳ thư viện lưu trữ json trong dom.

Bạn có thể hiển thị html bằng cách sử dụng dữ liệu từ json và giữ một bản sao của biến số json đó dưới dạng biến toàn cầu trong javascript.

Answer 3

Vì vậy, bạn muốn giữ tham chiếu đến dữ liệu JSON đã tạo DOMFragment của bạn từ mẫu?

Giả sử bạn có hàm mẫu lấy mẫu và dữ liệu và trả về nút DOM.

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

Bạn có thể lưu trữ json gốc trên tập dữ liệu của nút. Bạn có thể cần một tập dữ liệu shim mặc dù.

Cũng không có cách nào để "ánh xạ" JSON thành HTML mà không sử dụng công cụ tạo mẫu. Thậm chí sau đó bạn sẽ phải lưu trữ tên mẫu trong dữ liệu json (như dữ liệu meta) và cảm thấy xấu xí với tôi.

Answer 4

Tôi đã làm điều này trong quá khứ cũng như theo một vài cách khác nhau.

Ý tưởng $('selector').data có lẽ là một trong những kỹ thuật hữu ích nhất. Tôi thích cách lưu trữ dữ liệu này vì tôi có thể lưu trữ dữ liệu theo cách hợp lý, trực quan và có trật tự.

Giả sử bạn có cuộc gọi ajax truy xuất 3 bài viết khi tải trang. Các bài viết có thể chứa dữ liệu liên quan đến dòng tiêu đề, ngày/giờ, nguồn, v.v. Hãy giả sử bạn muốn hiển thị tiêu đề và khi dòng tiêu đề được nhấp, bạn muốn hiển thị toàn bộ bài viết và chi tiết của nó.

Để minh họa cho khái niệm một chút giả sử chúng ta lấy json tìm kiếm cái gì đó như:

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

Từ một cuộc gọi ajax như thế này. . .

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

Ý tưởng là chúng tôi có thể lưu trữ dữ liệu liên quan đến phần tử dom và truy cập/thao tác/xóa dữ liệu đó sau khi cần. Điều này cắt giảm các cuộc gọi dữ liệu bổ sung có thể và lưu trữ dữ liệu một cách hiệu quả vào một phần tử dom cụ thể.

bất cứ lúc nào sau khi liên kết dòng tiêu đề được thêm vào tài liệu, dữ liệu có thể được truy cập thông qua bộ chọn jquery. Để truy cập dữ liệu bài viết cho tiêu đề đầu tiên:

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

Việc truy cập dữ liệu của bạn thông qua bộ chọn và đối tượng jquery được sắp xếp gọn gàng.