본문 바로가기

javascript

underscore.js template 예제

반응형

http://underscorejs.org/#template 


링크에 다음과 같은 예제가 
var compiled = _.template("hello: <%= name %>");
compiled({name : 'moe'});
=> "hello: moe"

var list = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>";
_.template(list, {people : ['moe', 'curly', 'larry']});
=> "<li>moe</li><li>curly</li><li>larry</li>"

var template = _.template("<b><%- value %></b>");
template({value : '<script>'});
=> "<b>&lt;script&gt;</b>"
하지만 실제로 프로그래밍을 하다보면 json파일과 같이 data collection을 이용하는 방법이 중요한다.
방법 1. 위에 2번째 예제와 같이 template 내에 funcion을 만들어서 넣는 방법
방법 2. template를 compile 한 후 json파일에서 각각의 data를 each 문으로 구하면서 compile에 넣는 방법

var people = [{name:'moe', age:'20'}, {name:'curly', age:'29'},{name:'larry', age:'33'}];
var compiled = _.template("hello: <%= name %> .... age : <%= age %>");   _.each(people, function(person){
compiled(person);
 });

=> hello: moe .... age : 20
hello: curly .... age : 29
hello: larry .... age : 33