HTML templating 실습
HTML Template의 보관
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
- 위와 같은 html 문자열을 어딘가에 보관해야한다. javascript 코드 안에 이런 정적인 데이터를 보관하는 것은 좋지 않다.
- 보관 방법
- 서버에서 file로 보관하고 Ajax로 요청해서 받아온다.
- HTML 코드 안에 숨겨둔다.
- 많지 않은 코드라면 2번을 사용해도 좋다.
HTML 코드 안에 숨겨두기
- HTML의 script 태그는 type이 javascript가 아니라면 렌더링 하지 않고 무시한다. 이를 이용한 것이다.
<script id="template-list-item" type="text/template">
<li>
<h4>{title}</h4><p>{content}</p><div>{price}</div>
</li>
</script>
<script type="text/javascript">
var data = [
{title : "hello",content : "lorem dkfief",price : 2000},
{title : "hello",content : "lorem dkfief",price : 2000}
];
//html 에 script에서 가져온 html template.
var html = document.querySelector("#template-list-item").innerHTML;
var resultHTML = "";
for(var i=0; i<data.length; i++) {
resultHTML += html.replace("{title}", data[i].title)
.replace("{content}", data[i].content)
.replace("{price}", data[i].price);
}
document.querySelector(".content").innerHTML = resultHTML;
// content 클래스를 가진 ul이 body에 존재
</script>
template literal
const name = "junyoung";
const msg = `제 이름은 ${name}입니다.`;
- 위처럼 백틱과 ${}을 사용하면 문자열에 값을 쉽게 넣을 수 있다.
- 하지만 jsp 엔진을 거치면 name은 page, request, session, context에서 변수를 찾아 끼워 넣고, null이라면 해당 부분을 지워버린다.
const msg = `제 이름은 ${'${name}'}입니다.`;
- '${}'을 한번 더 감싸주어서 바깥쪽은 서버가, 안쪽은 자바스크립트가 처리하게 할 수 있다.
- 참고자료 : https://okky.kr/article/492977
Author And Source
이 문제에 관하여(HTML templating 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@doforme/HTML-templating-실습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)