2014-01-30 2 views
0

20 개 단위로 JSON 데이터를 가져 오는 pininterest와 비슷한 단일 페이지 애플리케이션을 구축하고 있습니다. 프로젝트가 Angularjs, 백본 콧수염 또는 이와 유사한 프레임 워크를 지원하지 않습니다. 또는 도서관.JSON 데이터로 HTML 스 니펫을 작성하고 DOM에 스 니펫 삽입하기

나는 아래 내 문제에 대한 해결책을 식별에 도움이 필요합니다 :

  1. 내가 템플릿으로 (이미지 및 제외) 타일 내 HTML을 분리하고 싶습니다.
  2. JSON 데이터를 처음 20 개 항목으로 받으면 타일을 작성하여 기본 index.html에 삽입하고 싶습니다.
  3. 21-40과 40-60부터 JSON 데이터를 가져 오기위한 호출은 어떻게해야합니까? JSON 데이터에는 rank : 1, rank : 2 등의 번호 매기기 속성이 있습니다.

Javascript 또는 jQuery를 사용하여 프런트 엔드 솔루션을 찾고 있습니다.

답변

0

내가 SPA 응용 프로그램을 어떻게 사용하는지 설명하고 있습니다. 내 블로그의 집보기에 매우 유사한 기능을 구현합니다 (http://love2dev.com). 나는 새로운 타일을 위해 페이징을하지는 않는다.

당신이 옳다면, 당신이 필요로하는 것을 수행하기 위해 커다란 프레임 워크가 필요하지 않습니다. templating에 관해서는, 나는이 문서에 기초한 MUSTACHE 또는 무엇인가를 사용한다. http://tech.pro/tutorial/1743/javascript-template-engine-in-just-20-lines. 나는 실제로 나의 블로그에서 20 라인 기능을 사용한다. MUSTACHE를 사용하는 새로운 SPA 책에서는 귀하에게 달려 있습니다.

다음 20 개의 레코드를 호출하려면 페이징 된 데이터 집합을 검색 할 수 있도록 API를 구성해야합니다. 이는 쿼리 문자열 매개 변수 또는 라우트 변수를 사용하여 수행 할 수 있습니다. 너하기에 달렸다. 일반적으로 페이지 # 및 총 레코드에 대한 매개 변수가 있습니다. 실제 AJAX 레이어에 대한 도움이 필요하면 자신의 롤링 또는 reqwest 사용을 고려하십시오. https://github.com/ded/reqwest?source=cc.

+0

Chris에게 감사드립니다. 제공되는 링크를 살펴보고 질문이 있으면 다시 방문하겠습니다. – Vish

+0

템플릿 엔진 링크와 코드가 작동해야하는 필요성을 알았 기 때문에 js 코드 안에 내 HTML 스 니펫을 var 템플릿으로 포함해야합니다. 내 HTML 스 니펫은 꽤 복잡하고 약 70-80 줄이며 데이터 개체의 종류에 따라 업데이트해야하는 30-40 개 이상의 데이터 개체가 있습니다. 템플릿을 외부 .html 파일로 유지하고 var template = "/ pathto/partial/htmlfile"에서 참조 할 수 있습니까? – Vish