template3 handlebar 중첩 데이터 바인딩, @데이터변수 지난번에 간단히 handlebar 라이브러리 사용법을 정리했었다. ▷ 자바스크립트 템플릿 라이브러리 - handlebars 이전 글에 이어 쓰기엔 너무 길어질 거 같아서 더 공부하게 된 것들(사용해본 것들)은 여기에 새로 정리하려고 한다. 1. 중첩된 데이터 가져오기 1) each 헬퍼 밖의 데이터 만약 템플릿에 바인딩할 데이터가 var data = { students: [ { name: "enai", age: "10" }, { name: "tistory", age: "20" } ], title: "Hello" } 이렇고, Hello enai(10) Hello tistory(20) 이런 결과를 나타내고 싶다. students가 배열이므로 each 헬퍼를 사용하여 템플릿을 다음과 같이 만든다. {{#eac.. 2019. 8. 19. 자바스크립트 템플릿 라이브러리 - handlebars 템플릿으로 HTML을 변경하는 작업을 할 때 도와주는 handlebars 라이브러리가 있다. replace 메서드로 템플릿을 적용했던 기존 방법으론 템플릿 내용이 복잡하거나 길어질 수록 가독성도 떨어지고 코딩하기도 힘들다. template using handlebar class가 show인 section 안에 게시글 목록을 만들 것이다. section 태그 안에 템플릿을 만들어뒀다. {{ }} 안의 내용과 매칭되는 데이터가 파싱될 것이다. 1. handlebars 설치 먼저 라이브러리를 사용하기 위해 설치를 해줘야 한다. 1) 구글에 handlebars cdn을 검색한다. cdn은 content delivery network라는 뜻으로, 직접 다운로드 받지 않아도 가장 가까운 캐시 서버에서 컨텐츠를 가져.. 2019. 8. 9. HTML templating (자바스크립트로 템플릿 사용하기) HTML templating은 반복적인 HTML 태그 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)와 결합하여 화면에 추가하는 작업을 말한다. HTML 태그 template test example /* HTML Template script HTML의 script 태그는 type이 javascript가 아니면 렌더링하지 않고 무시한다는 점을 이용 */ 자바스크립트 var data = {title : "hello", content : "lorem dkfief", price : 2000 }; //HTML의 script에서 가져온 HTML Template var html = document.querySelector("#template-list-item").innerHTML; html... 2019. 8. 3. 이전 1 다음