코드 1 (html)
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<tbody id="tbody">
</tbody>
<script id="result-template" type="text/x-handlebars-template">
{{#each bankDtoList}}
<tr>
<td>{{this.tradingDate}}</td>
<td>{{this.depositor}}</td>
<td>{{this.withdrawalAmount}}</td>
<td>{{this.depositAmount}}</td>
<td>{{this.totalAmount}}</td>
</tr>
{{/each}}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.5/handlebars.js"></script>
</body>
</html>
코드2 (app.js)
let renderResultBox = function(data) {
let source = $('#result-template').html();
let template = Handlebars.compile(source);
let html = template(data);
$('#tbody').html(html);
};
renderResultBox();
코드2 데이터를 받아와서 rederResultBox() 를 실행하면
받은 데이터로 랜더링? 을해서
코드 1의 <tbody id='tbody'> 요기에 </tbody> 보여줘야한다.
기존 .html 의 코드1번에선 잘 실행이 되었는데
.hbs 로 변경후 되질 않음..
해결방법 코드3
\(역슬래시) 로 {{}} 를 이스케이프처리 후 정상작동
코드3 (.hbs)
<script id="result-template" type="text/x-handlebars-template">
\{{#each bankDtoList}}
<tr>
<td>\{{this.tradingDate}}</td>
<td>\{{this.depositor}}</td>
<td>\{{this.withdrawalAmount}}</td>
<td>\{{this.depositAmount}}</td>
<td>\{{this.totalAmount}}</td>
</tr>
\{{/each}}
</script>
자세한 이유는 모르겠다. 아래를 보고.. 삽질의끝에 해결
왜 떄문엔지 알아볼것.
https://stackoverflow.com/a/19386972
Handlebars template inside Handlebars
Im trying to render a Handlebars template using NodeJS and Backbone. So far, what i have done works perfectly when inside an HTML file: app.MyView = Backbone.View.extend({ ... render: funct...
stackoverflow.com
https://blog.outsider.ne.kr/1082
Assemble : Handlebars를 이용한 정적사이트 생성도구 :: Outsider's Dev Story
최근에 프로젝트에서 프론트엔드를 서버 쪽 템플릿엔진에 연결하지 않고 HTML 기반으로만 동작하도록 만들어야 할 일이 있었다. 이건 마치 웹 프론트엔드를 모바일 앱처럼 클라이언트처럼 보고 서버에 API로만 붙...
blog.outsider.ne.kr