반응형
Nest.js 에서 화면 그려주는 부분을 hbs(handlebars) 을 사용하였다.
동적으로 화면을 그려주기 위해서, template 를 찾다가, Handlebars.js 를 이용하면 Handlebars template 을 사용할 수 있다는 것을 알게 되었다.
1. 내 폴더 구조는 아래와 같았다.
views
ㄴindex.hbs
2. 서버에서 데이터를 받아서 hbs 의 문법을 사용하여 화면을 그렸다.
<html>
<head>
</head>
<body>
{{#each list}}
<span>{{this.comment}}</span>
{{/each}}
</body>
</html>
3. 이제 동적으로 그려주기 위해서 Handlebars template 을 사용하기로 한다.
script 부분에 handlers.min.js 도 추가하고, jquery도 추가한다.
template 구분은 제일 아래에 위치해서 ajax 결과 반환 후 사용하도록 한다.
<html>
<head>
..
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
{{#each list}}
<span>{{this.comment}}</span>
{{/each}}
<ul class="ul_list">
</ul>
</body>
...
$(".classname").click(function () {
$.ajax({
type: 'POST',
dataType: 'json',
data: {
"key": value
},
url: '/api/url',
success: function (result) {
var source = $("#list-template").html();
var template = Handlebars.compile(source);
var html = template(result);
$(".ul_list").html(html);
}
});
});
...
<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
{{#each list}}
<span>{{this.comment}}</span>
{{/each}}
</script>
</html>
4. 음.. 여기까지 아주 좋았다. hbs 문법도 익숙해져서 template 작성하는 부분에 대해서는 막힘이 없었다.
그런데 왠 걸..
에러가 빵빵 터진다.
나는 분명 list 데이터를 넘겼지만
var source = $("#list-template").html();
var template = Handlebars.compile(source);
var html = template(result);
$(".ul_list").html(html);
template 에서는 아무런 데이터도 노출하지 않았다.
<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
{{#each list}}
<span>{{this.comment}}</span>
{{/each}}
</script>
위치도 바꿔보고, id 도 틀렸는지 확인도 하고, 삽질을 하고 나서야 답을 찾을 수 있었다.
<!-- hbs tamplate -->
<script id="list-template" type="text/x-handlebars-template">
\{{#each list}}
<span>\{{this.comment}}</span>
\{{/each}}
</script>
문법 앞에 역슬러쉬(\) 를 붙여 줘야 했던 것이었다.
반응형
'Programming > Node.js' 카테고리의 다른 글
| [Nest.js] Table leftJoin with Mysql2 (0) | 2024.11.24 |
|---|---|
| [Nest.js] AWS DB Tunneling With Mysql Setting (터널링 및 Mysql 설정) (2) | 2024.11.24 |
| [MongoDB] 랜섬웨어 (READ__ME_TO_RECOVER_YOUR_DATA) (0) | 2024.04.06 |
| [Node.js/mongoose DB] cascade delete 기능 구현하기 (0) | 2021.12.10 |
| [Node.js/AdminBro] Admin Page panel + MongoDB (0) | 2021.10.27 |
