검색결과 리스트
handlebars tip에 해당되는 글 2건
- 2018.08.17 handlebars로 array 문자열을 넘길때 발생하는 문제...
- 2018.08.11 handlebars 사용 하면서 알게된 팁 정리...
글
node.js에서 아래와 같은 값을 render로 보낸다 치면
const labels = ['Mar 1', 'Mar 2', 'Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7']
문자열의 표시인 작은 따옴표가 없어지는 경우가 발생함..
이는 html을 컨트롤 하는데는 좋은데..
html 안에 client javascripte 안에 변수로 던저 줄때는 문제가 된다..
따옴표가 없으니 제대로 인식이 안되는
그래서 수동으로 따옴표 붙이는 작업도 해봤는데 뭔가 좀 거시기해서 구글링 해서 찾으니
json 인코딩을 이용한 처리가 있었음
- node.js 의 스크립트 파일
const labels = ['Mar 1', 'Mar 2', 'Mar 3', 'Mar 4', 'Mar 5', 'Mar 6', 'Mar 7'];
res.render('dashboard', {
labels: encodeURIComponent(JSON.stringify(labels))
});
- handlebars의 html 처리
<script>
// Area Chart Example
var ctx = document.getElementById("realTimeUser");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: JSON.parse(decodeURIComponent("{{{labels}}}")),
}
});
</script>
참고로 html 파일에 값은 따옴표 꼭 붙쳐줘야 제대로 인코딩 됨
글
node.js express에서 template engine 으로 handlebars를 사용하기로 하면서 몇가지 알게 된것을 정리 해본다.
- - layout 기능
template engine 중에 그나마 html 태그를 그대로 쓰는것중에 ejs 하고 handlebars가 있었다. 사람들이 가장 많이 이야기 하게 handlebars 라서 사용 하였는데 대쉬보드 형태의 페이지를 만든다면 layout 기능이 지원하는 handlebars 가 편한거 같다. ejs도 확장 기능으로 layout 지원하는거 같은데 아직은 뭔가 한참 만들고 있는느낌이라 패스..
- - 거지 같은 조건 비교문 #if #unless
#if #unless 로는 true / false 밖에 사용이 안된다. 그래서 따로 helper를 이용해서 조건문 연산자를 만들어 사용 하는거 같다. 아래 주소는 사용 방법이니 참고를...
[Javascript] handlebars.js {{#if}} 조건부의 논리 연산자
안에 페이지 보면 Handlebars.registerHelper() 요렇게 되어있는데 메인페이지에 선언해 뒤면 되고 앞에 Handlebars 는 var Handlebars = require('hbs') 해서 가지고 오면 된다.
- - 색션 내에서 다른 루트 변수에 접근 할때 확인
{
main : { name: '나 메인'},
sub : { name: '나 서브'}
}
이런 값을 넘겨서
아래와 같이 템플릿으로 사용 할경우
{{#main}}
{{name}} <- 이것은 main의 값
// 여기서 sun 의 name 값을 가지고 올려면
{{../sub/name}} <- 요렇게 해야 sub의 name값을 가지고옴
{{/main}}
처음에는 ../이거 없이 했는데 값이 undefined 해서 나와서 환장 했음..
이 사이트가 아니였음 눙물 흘리고 계속 삽질 할뻔 했음.. https://taegon.kim/archives/4910
올려주신분에게 감사의 마음을...
RECENT COMMENT