handlebars( 핸들바 템플릿 ) 기초

1. express-handlebars 설치( 터미털에서 )

npm install express-handlebars --save

2.  handlebars 등록

var exphbs = require('express-handlebars');

//여기서 매개변수 app은 var app=express(); 로 익스프레스앱을 뜻함. 
module.exports=function(app) {
    
    //handlebars template
    app.engine('handlebars', exphbs.create({
        defaultLayout:'main', // 디폴트레이아웃사용.
        layoutDir:app.get('views')+'/layouts',  //레이아웃 파일( handlebars ) 경로
        partialsDir:[app.get('views')+'/partials'], //파셜 파일 경로
        helpers:{  //전역 헬퍼등록
            timeago:function(timestamp) {
                return moment(timestamp).startOf('minute').fromNow();
            }
        }
    }).engine);
    app.set('view engine', 'handlebars'); // handlebars 등록
    return app;
};

아래 객체가 핸들바 템플릿으로 넘겨졌다고 가정.

var model={
    name:'World'
}

템플릿은 다음 마크업을 포함한다.

<div>Hello {{ name }} !</div>

이 파일은 브라우저에서 확인해 보면 Hello World 라고 찍히게 된다.

{{ }}    -->   데이터 바인딩 되는 부분

{{{ }}}    -->  핸들바의 예약어인데 레이아웃과 관련해서 사용. 핸들바의 콘텐츠가 삽입된다. 

{{ >  }}   -->  핸들바 파셜뷰 그리는데 사용.  즉 작은 뷰 삽입 / 재사용 콤포넌트 삽입용도 정도로 이해~                 

조건문( 참일 경우 )

var model={
    name:'World',
    description:'역시 프로그래밍은 헬로월드부터~'
}

<div>
    Hello {{name}}!<br />
    {{#if description}}
        <p>{{descripion}}</p>
    {{/if}}
</div>

조건문( 거짓일 경우 )

var model={
    name:'World',
    description:'역시 프로그래밍은 헬로월드부터~'
}

<div>
    Hello {{name}}!<br />
    {{#unless description}}
        <p>{{descripion}}</p>
    {{/if}}
</div>

 

루프 템플릿

- 핸들바의 루프템플릿 내부에서는 실행 컨텍스트가 바뀐다.

이는 각 each 내부에서 데이터에 접근할 때 컬렉션의 각 항목부터 경로가 시작된다는 뜻.

{{#each dataName}}
    <div class="col-md-4 text-center" style="padding-bottom:1em;">
        <a href="/">
            <img src="......" alt="{{title}}" class="img-thumbnail"/>
        </a>
    </div>
{{/each}}