부스트코스 웹앱개발 -4 HTML Templating

html template이란 객체지향으로 설명하자면 붕어빵틀이 template이고 팥이 데이터이다.

template을 만들어놓고 거기다 데이터만 넣으면 값을 바로 보여줄수 있는 것을 말한다.

 

예를들어 ajax를 활용해 쇼핑몰에 상품광고를 한다치면 옆방향키를 누르면 다음광고상품들이

쭈르륵 나와야하는데 이럴 때 쓰는것이 htmltemplate이다.

기본적으로 replace를 활용해서 한다.

var data = [{
    title : "hello",
    content : "lorem",
    price : 2000
},
{
    title : "ww",
    content : "rr",
    price : 2000
},
{
    title : "ee",
    content : "tt",
    price : 2000
}];

var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
var resultHTML = [];
for(i = 0, len = data.length; i < len; i++){
   var result = html.replace("{title}", data[i].title)
        .replace("{content}", data[i].content)
        .replace("{price}", data[i].price);
    resultHTML.push(result);
    }
    console.log(resultHTML);

 

이렇게 하면 된다.

 

실습

템플릿 코드는 어디다 박아둬야한다. 동적인 활동을 하는 js에 받기엔 적절하지 않으므로

서버에 넣던가 html코드안에 숨겨둬야한다.

숨기는법은 <script>여기서 타입을 text/template을 하면 된다.</script>

<script id="template-list-item" type="text/template">
  <li>
      <h4>{title}</h4><p>{content}</p><div>{price}</div>
  </li>
</script>

이런식으로 숨긴 후 js에서 id값을 가져와서 값을 대입한다.

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;//배열값을 문자열로 받기위해 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;