Handlebars template precompile

참고 : http://handlebarsjs.com/precompilation.html

1. install node, npm 

<pre class="brush:html"> <link href="//home.tistory.com" rel="stylesheet" type="text/css"/> <script type="text/javascript"> var link_src = "jcdgods.tistory.com" </script> </pre>

$ brew install node

2. install Handlebars npm package 

$ npm install handlebars -g

3. 템플릿 작성 

{{#if title}}<h5 class="hide">{{title}}</h5>{{/if}} <ul class="cfix"> {{#items}} <li> <div class="box_pd"> <a href="{{prdLink}}" onclick="ga('send', 'event', '중소세카테고리', '프리미엄코너', '');" data-prd-no="{{prdNo}}" data-minor-yn="{{minorYn}}" data-ad-trc-no="{{trcNo}}" data-ad-typ-gubn="{{typGubn}}" data-ad-area-gubn="{{areaGubn}}" data-ad-cpc-yn="{{cpcYn}}"> {{#if best}}<span class="order">{{best}}<span class="hide">위</span></span>{{/if}} <img src="{{prdImgThumb}}" alt="{{prdTitle}}" onerror="skp11.common.blankImage(this, 212);"/> <div class="pname"> <p>{{prdTitle}}</p> <div class="price_info mini"> <span class="price_detail"> <span class="hide">{{#if unitPrice}}{{unitPrice}}{{else}}판매가{{/if}}</span><strong class="sale_price">{{prdFinalPrice}}</strong>{{#if unitTxt}}{{unitTxt}}{{else}}원{{/if}} </span> </div> <div class="prd_flag"> {{#if myWayDscStr}}<em>{{myWayDscStr}}</em>{{/if}} <div class="s_flag"> {{#if freeDlv}}<em>{{freeDlv}}</em>{{/if}} {{#if nowDlv}}<em><em class="now_ico"><span class="hide">now배송</span></em></em>{{/if}} </div> </div> </div> </a> </div> </li> {{/items}} </ul>

4. precompile - tpl 폴더 아래 템플릿 파일들을 컴파일하고 하나의 파일로 (template.js) 합쳐준다.

$ handlebars tpl/*.handlebars -f template.js

5. precompiled template + handlebars 로 화면 그리기 

var template = Handlebars.templates[templateId]; template(data);