이번엔 Prototype에서 제공하는 많은 분들이 있는지 없는지도 모르시는 유명한 녀석 Template에 대해 알아보도록 할까요.
저도 사실 Prototype에서 제공하는 기능들을 나름 대충 거의다 접해봤다지만 이녀석 만큼은 전혀 사용해본 적이 없습니다;
이번에 다시 한번 공부를 하면서 천천히 보니 이녀석을 잘 쓰면 정말 괜찮겠다는 생각이 드는군요.
같은 형식을 계속해서 찍어낸다거나 어떤 틀이 필요한 작업을 할때 매우 유용하게 사용될 수 있을것 같습니다.

Template 사용하기 ————————————————————————————————-
Prototype에서 제공하는 Template 클래스는 Ruby의 템플릿과 매우 유사한 문법을 사용하고 있습니다.
Template에는 #{필드명} 형식의 심볼을 가진 문자열을 포함하게 되며 evaluate라는 메서드를 통해 템플릿이 사용되게 될때 해당 필드명에 해당하는 다른 객체의 값으로 대체되게 됩니다.

예제)
[code]// 계산을 위한 템플릿
var myTemplate = new Template(‘The TV show #{title} was created by #{author}.’);

// 템플릿에 사용될 데이터
var show = {title: ‘The Simpsons’, author: ‘Matt Groening’, network: ‘FOX’ };

// 데이터를 적용하여 템플릿 사용
myTemplate.evaluate(show);
// -> The TV show The Simpsons was created by Matt Groening.[/code]

Template의 재사용성 ———————————————————————————————–
위의 예제를 통해 Template의 사용법을 알게 되었습니다. 위를 통해 알 수 있듯이 Template은 정적인 데이터를 사용하기 위핸 클래스가 아닙니다. 정적인 부분을 유지하며 매우 동적인 데이터 처리를 할 수 있습니다.
이는 결과적으로 데이터의 재사용성을 뜻합니다.

예제)
[code]// 데이터로 사용할 객체 생성
var conversion1 = {from: ‘meters’, to: ‘feet’, factor: 3.28};
var conversion2 = {from: ‘kilojoules’, to: ‘BTUs’, factor: 0.9478};
var conversion3 = {from: ‘megabytes’, to: ‘gigabytes’, factor: 1024};

// 템플릿 생성
var templ = new Template(‘Multiply by #{factor} to convert from #{from} to #{to}.’);

// 각 객체별 템플릿 포맷 적용
[conversion1, conversion2, conversion3].each( function(conv){
  templ.evaluate(conv);
});
// -> Multiply by 3.28 to convert from meters to feet.
// -> Multiply by 0.9478 to convert from kilojoules to BTUs.
// -> Multiply by 1024 to convert from megabytes to gigabytes.[/code]

Escape 처리 ——————————————————————————————————-
객체의 데이터 바인딩 없이 문자열로 표시하고 싶을 경우에는 어떻게 해야 할까요? 다른 언어와 동일합니다.

예제)
[code]// 자바스크립트에서 Escape처리를 하기위해서는 \를 두개 사용해야 함
var t = new Template(‘in #{lang} we also use the \\#{variable} syntax for templates.’);
var data = {lang:’Ruby’, variable: ‘(not used)’};
t.evaluate(data);
// -> in Ruby we also use the #{variable} syntax for templates. [/code]

Custom Syntaxes ————————————————————————————————–
Template 클래스의 기본 Syntax는 #{필드명}을 따르고 있습니다. 하지만 개인적으로 다른 형식으로도 얼마든지 사용할 수 있습니다. 하지만 정규식을 좀 알아야 할 필요가 있겠군요.

<%=필드명%>형식을 사용할 때 예제)
[code]var syntax = /(^|.|\r|\n)(\<%=\s*(\w+)\s*%\>)/;
// ‘<%= field %>’ 형식에 매칭되는 Syntax

var t = new Template(‘<div>Name: <b><%= name %></b>, Age: <b><%=age%></b></div>’, syntax);
t.evaluate( {name: ‘John Smith’, age: 26} );
// -> <div>Name: <b>John Smith</b>, Age: <b>26</b></div>[/code]

Template Methods ————————————————————————————————

evaluate : 데이터가 담겨있는 객체를 이용하여 템플릿의 포매팅 결과값을 반환합니다.
[code]evaluate(object) -> String[/code]

예제)
[code]var hrefTemplate = new Template(‘/dir/showAll?lang=#{language}&categ=#{category}&lv=#{levels}’);
var selection = {category: ‘books’ , language: ‘en-US’};

hrefTemplate.evaluate(selection);
// -> ‘/dir/showAll?lang=en-US&categ=books&lv=’

hrefTemplate.evaluate({language: ‘jp’, levels: 3, created: ’10/12/2005′});
// -> ‘/dir/showAll?lang=jp&categ=&lv=3’

hrefTemplate.evaluate({});
// -> ‘/dir/showAll?lang=&categ=&lv=’

hrefTemplate.evaluate(null);
// -> error ![/code]