Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

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

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

사용법은 아주 단순하다.

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

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

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

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을 이용해서 다음과 같이 사용할수가 있다.(이렇게 하는게 제일 편한듯...)

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}가 그대로 찍힌다.

2008/11/17 23:20 2008/11/17 23:20