HTML Templating
- 위의 상품 리스트 데이터를 Ajax로 JSON 형태의 데이터를 받아와서 화면에 추가해야하는 상황이라고 가정해보자
- 리스트의 구성은 유사하기 때문에 사용하는 tag 역시 비슷할 것이다. 이 때 templating이라는 개념을 도입하면 좋다
HTML Templating 작업이란?
- 반복적인 HTML 부분을 template로 만들어 두고, 서버에서 온 데이터(주로 JSON)을 결합해서, 화면에 추가하는 작업이다.
결합과정 해결하기
var data = { title : "hello",
content : "lorem dkfief",
price : 2000
};
var html = "<li><h4>{title}</h4><p>{content}</p><div>{price}</div></li>";
html.replace("{title}", data.title)
.replace("{content}", data.content)
.replace("{price}", data.price);
// 메서드 체이닝
- 위처럼 JSON을 HTML template와 결합하면 된다.
- 메서드 체이닝 : 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다.