Google AdSense (text)

hidden logo stop

Moving

거지 같은 이글루스 광고노출 정책이 싫어서,
새 보금자리(http://blog.leocat.kr/)로 이사감.

[Underscore.js] template 사용하기 Computer & Program

Underscore.js template을 사용하면 ajax 등을 통해서 얻어온 json 객체를 찍어내기 편하다. jQuery template 같은 것들도 많긴 하지만, 그냥 심심해서 써봤다고 할까.. =ㅅ=;;

사용법은 간단하다. _.template()함수에 찍어내고 싶은 html 템플릿 내용을 넘겨주면, 템플릿 함수를 생성해 준다. 템플릿이 필요한 부분에서 생성된 함수를 호출하면 된다.

<script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>

<script id="menuTemplate" type="text/template">
  <dt><%- name %></dt>
  <dd><%- desc %></dd>
</script>

<script type="text/javascript">
  var myTemplate = _.template($('#menuTemplate').html());
  myTemplate({name: 'Coffee', desc: 'Black hot drink'});
</script>

위의 결과는 아래와 같다. 생성된 myTemplate() 함수에 json 객체를 넣어서 호출해주면 아래와 같은 내용을 만들어 준다.
<dt>Coffee</dt>
<dd>Black hot drink</dd>


간단한 샘플 전체 내용은 github(entireboy/egloos-sample testHtml/template/underscore.js/index.html)에 올려뒀으니 확인 가능하다.


수정 덧. 2014. 01. 29.)
node.js로 간단한 web server를 만든 샘플도 추가
node.js 웹서버 샘플
브라우저 developer tool 같은거로 json 주고 받은거까지 확인할 수 있을 것 같다. :D
(사실 간만에 포스팅하는거라 심심하고 손이 근질근질 했음 -ㅅ-;;;)


덧글

댓글 입력 영역

Google AdSense (text/image)