HTML templating은 반복적인 HTML 태그 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)와 결합하여 화면에 추가하는 작업을 말한다.
HTML 태그
<body>
<h2>template test example</h2>
<ul class="content"></ul>
/* HTML Template script
HTML의 script 태그는 type이 javascript가 아니면 렌더링하지 않고 무시한다는 점을 이용 */
<script id="template-list-item" type="text/template">
<li>
<h4>{title}</h4><p>{content}</p><div>{price}</div>
</li>
</script>
</body>
자바스크립트
var data = {title : "hello",
content : "lorem dkfief",
price : 2000
};
//HTML의 script에서 가져온 HTML Template
var html = document.querySelector("#template-list-item").innerHTML;
html.replace("{title}", data.title)
.replace("{content}", data.content)
.replace("{price}", data.price); //메서드 체이닝
document.querySelector(".content").innerHTML = resultHtml;
id가 template-list-item인 템플릿 안의 HTML 코드를 가져와서, {title}을 data.title로, {content}를 data.content로, {price}를 data.price로 바꾼다.
class가 content인 요소의 안에 넣는다.
※ 템플릿 길이가 길면 따로 템플릿을 만들어 Ajax로 호출해서 사용하는 일이 많다. (데이터는 서버에서 호출),
템플릿 리터럴(template literal)을 쓰면 replace 메서드 없이 쉽게 템플릿 작업을 할 수 있다.
라이브러리를 사용하는 방법도 있다. (handlebars 사용하는 법 보러가기)
출처)
edwith 부스트코스 웹 프로그래밍
'JavaScript' 카테고리의 다른 글
| 객체 리터럴과 this (0) | 2019.08.04 |
|---|---|
| 자바스크립트 배열의 함수형 메서드 (0) | 2019.08.04 |
| Event delegation (이벤트 위임) (0) | 2019.08.03 |
| DOMContentLoaded 이벤트 (0) | 2019.08.03 |
| 자바스크립트로 Web Animation 구현하기 (0) | 2019.08.03 |
댓글