[JS]prototype.js에서 HTML엘리먼트 생성에 Template 객체 사용하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

prototype.js에서는 Template이라는 정해진 형식의 문자열을 생성해 주는 객체를 제공하고 있다. Template는 어떤 정해진 문자열(또는 HTML)을 반복해서 찍어낼 때 아주 유용하다.(한번만 사용할꺼라면 당연히 Template를 쓸 일이 없기 때문에...)

사용법은 아주 단순하다.

JavaScript

var tpl = new Template('<div><ul><li>test</li></ul></div>');
tpl.evaluate("");

해주면 된다. 물론 저코드는 아무동작도 안한다.  템플릿 결과로 나온 걸로 어떤 액션을 주지 않았기 때문에 tpl.evaluate("")의 결과값으로 Template로 만든 String이 리턴되기 때문에 저런식으로 만든 HTML을 원하는 위치에 삽입해 주면 된다. 위 코드에서는 사용법을 예시로 들기 위해서 evaluate()의 파라미터로 빈문자열("")을 파라미터로 주었는데(없으면 에러가 나기 때문에...) 머 다른 변수를 주어도 상관이 없다.

저 정도만으로는 그다지 유용하지 않은데 당연히 그럴리가 없다. 템플릿안에 #{fieldName}라는 식별자를 통해서 객체의 값을 받을 수 있다.

JavaScript

var tpl = new Template('<div><ul><li>#{id}</li><li>#{nickname}</li><li>#{job}</li></ul></div>');
var obj = { id:'rockdoli', nickname:'Outsider', job:'Web Developer'};

tpl.evaluate(obj);
// output : <div><ul><li>rockdoli</li><li>Outsider</li><li>Web Developer</li></ul></div>

위 처럼 탬플릿에 #{fieldName}를 사용할 경우 넘겨받은 객체에서 해당 이름으로 값을 찾아서 해당 값으로 교체한다 원하는 이름과 매치되는 값이 없을 경우에는 아무값도 넣지 않는다. 이걸 사용하면 원하는 엘리먼트를 자유롭게 생성해 낼 수 있다.  prototype.js의 Enumerable을 이용해서 다음과 같이 사용할수가 있다.(이렇게 하는게 제일 편한듯...)

JavaScript

var tpl = new
Template('<div><ul><li>#{id}</li><li>#{name}</li><li>#{age}</li></ul></div>');
var obj = [{id:'1', name:'Steve', age:'24'},
           {id:'2', name:'Mike', age:'30'},
           {id:'3', name:'Julie', age:'19'}]
obj.each(function(w) {
    tpl.evaluate(obj);
});

위처럼 사용하면 원하는 위치에 값을 바꿔가면서 쉽게 반복해서 찍어낼 수 있다.

var tpl = new Template('<div><ul><li>#{id}</li><li>\\#{nickname}</li><li>#{job}</li></ul></div>');

escape도 있는데 위처럼 역슬래시 2개(\\)르 사용하면 #{nickname}부분은 해당값으로 치환하지 않고 #{nickname}가 그대로 찍힌다.