DOM에 JSON을 저장하기위한 유용한 정보

Question

HTML 템플릿을 사용하여 일부 json 데이터를 렌더링하려고합니다.

아직 아무것도 구현하지 않았지만 json에서 html 요소로 데이터 값을 설정하여 하나의 레코드에 대한 템플릿을 포함하거나 일부 인수를 사용하여 항목 컬렉션을 렌더링 할 수 있기를 바랍니다. 각 항목에 대한 템플릿 HTML이지만 항목을 렌더링하는 데 사용 된 소스 JSON과 동일한 형식으로 JSON 객체를 다시 가져올 수 있습니다 (필자의 초기 JSON에 레코드 행의 동작에 대한 추가 정보가 필요하다. 사용자가이 레코드로 무엇인가를 할 수 있는지 또는 할 수 없는지를 확인하라는 Ajax 요청을하고이 정보 중 일부가 템플릿에 표시되지 않는지 확인하십시오.

저장 대상 객체의 각 속성에 대한 입력 요소가있는 숨겨진 양식을 만들 수 있음을 알고 있습니다. JSON과의 매퍼 함수가 있지만 잔인한 소리가 들리므로 마음에 들지 않습니다. 좀 더 밝은 "봉투".

DOM에 어딘가에 저장할 수 있도록 JSON 객체를 "직렬화"및 "비 직렬화"할 수있는 JS 라이브러리가 있는지 궁금합니다 (예 : 데이터 표시가 포함 된 요소에 있지만 원하는 수 있습니다. 양식 요소로 표시 할 필요가없는 추가 속성 저장)? 첫 번째 대답으로

UPDATE 글로벌 변수에 JSON을 저장 제안, 나 또한 그것에 대해 생각하고, 내 "최고"정신 솔루션에 JSON의 "지도"를 할 것입니다 자바 스크립트 모듈 (또는 jQuery 플러그인)을 만드는 것이 었습니다 html로 저장하고 html에 값을 저장할 수 없다면 내부 변수에 저장할 수 있으므로 html 요소에서 데이터를 가져 오려면 로컬 복사본에서 가져올 수 있습니다. 이게 더 좋은 방법인지 알고 싶습니까? 변수에이 정보를 저장하는 라이브러리가 있지만 해당 데이터를 html로 실시간 바인딩하는 경우 매우 유용 할 것입니다.

업데이트 2이 지금 http://knockoutjs.com/ 사용하여 수행됩니다, 더 이상 DOM에서 JSON을 유지 할 필요는 녹아웃가 수행하지 않는 JSON < => HTML 매핑 자동으로 내가 JSON을 저장할 수있는 라이브러리가 있다고 생각하지 않습니다

Answer 1

자연으로 저장하지 않는 이유는 무엇입니까? 자바 스크립트 개체로 사용 하시겠습니까? DOM은 끔찍한 곳입니다.

즉, jQuery에는이 것을 허용하는 data method이 있습니다.

Answer 2

돔에서.

json의 데이터를 사용하여 html을 렌더링하고 해당 json 변수의 복사본을 자바 스크립트의 전역 변수로 유지할 수 있습니다.

Answer 3

템플릿에서 DOMFragment를 생성 한 JSON 데이터에 대한 참조를 유지하고 싶습니까?

템플릿과 데이터를 가져 와서 DOM 노드를 반환하는 템플릿 함수가 있다고 가정 해 보겠습니다.

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

노드의 데이터 세트에 원본 json을 저장할 수 있습니다. 그래도 데이터 집합이 필요합니다.

템플릿 엔진을 사용하지 않고도 JSON을 HTML에 "매핑"할 수있는 방법이 없습니다. 그렇다면 json 데이터에 (메타 데이터로) 템플리트 이름을 저장해야하고 저에게는보기 흉한 느낌이들 것입니다.

Answer 4

저는 여러 가지 다른 방식으로 과거에도이 작업을 수행했습니다.

$('selector').data 아이디어는 아마도 가장 유용한 기술 중 하나입니다. 논리적이고 직관적이며 질서 정연한 방식으로 데이터를 저장할 수 있기 때문에 데이터를 저장하는 방식을 좋아합니다.

페이지로드시 3 개의 기사를 가져 오는 아약스 호출이 있다고 가정 해 보겠습니다. 기사에는 헤드 라인, 날짜/시간, 소스 등과 관련된 데이터가 포함될 수 있습니다. 헤드 라인을 표시하고 헤드 라인을 클릭하면 전체 기사 및 세부 정보를 표시하려고한다고 가정합시다.

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

이 같은 아약스 통화에서 :

는 약간의 우리가 찾고 뭔가를 JSON를 검색 가정 해 봅시다 개념을 설명합니다. . .

우리는 관련된 데이터를 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와 객체를 통해 데이터에 액세스하는 것은 그렇다고 깔끔한입니다.