handlebars
TRANSCRIPT
Table of Contents• Handlebars ?
• Why Handlebars? (Mustache?)
• Getting Started
• Expression
• Helper
• built-in
• custom
• Comments
• Built-in Utility
Handlebars?
• http://handlebarsjs.com/
• https://github.com/wycats/handlebars.js/
• Mustache 템플릿 언어기반으로 만들어진 확장 템플릿
• View 와 Code 를 분리 하기 위해 만들어짐 : 로직 과 presentation 을 분리
• Mustache 템플릿에 Handlebars 확장 기능들을 사용 할수 있음
• Web site보다는 Web app에 더 적합
• 자바스크립트 코드 안에 HTML Element 를 넣지 않기 위해
not Handlebars…var $content = $( '#content' ), $div = $( '<div class="tab">탭 영역 입니다. </div>' ), $gnb = $( '<h1 > header 부분 영역입니다. </h1>' ), $input = $( '<input type="text" placeholder="텍스트" value="1" disalbed>' ); $content.append( $div ).append( $gnb ).prepend( $input );
var $content = $( '#content' ), $div = $( '<div>' ).addClass('tab').html( '탭 영역입니다. ' ), $gnb = $( '<h1></h1>' ).html( ' header 부분 영역입니다. '), $input = $( '<input>' ).attr({ "type" : "text", "placeholder" : "텍스트" }).val( "1" ).prop( 'disalbed', true ); $content.append( $div ).append( $gnb ).prepend( $input );
var $content = $( '#content' ); function makeTemplate ( $elem, dContent, gContent ) { var $div = $( '<div>' ).addClass('tab').html( dContent ), $gnb = $( '<h1></h1>' ).html( gContent ), $input = $( '<input>' ).attr({ "type" : "text", "placeholder" : "텍스트" }).val( "1" ).prop( 'disalbed', true ); return $elem.append( $div ).append( $gnb ).prepend( $input ); }; makeTemplate( $content, '탭 영역입니다.', 'header 부분 영역입니다.' );
너무 복잡함… JS 안에 html 이 들어가게 되고, 반복적으로 재사용 되는 코드에서는 사용 하기 힘듬 .. -> 장점으로 jQuery를 많이 써본다..??
jQuery 스타일로 변경도 해보고..
모듈화도 해보지만..
Handlebars
<script type="text/x-handlebars-template" id="test3-template"> <input type="text" placeholder="텍스트" value=“{{value}}“ disabled> <div class="tab"> {{dContent}} </div> <h1>{{gContent}}</h1> </script>
var context3 = { “value”: 1, "dContent": "탭 영역입니다. ", "gContent": "header 부분 영역입니다. " }; var test3Tmpl = Handlebars.compile( $( '#test3-template' ).html() ); $( '#test3' ).html( test3Tmpl( context3 ) );
Template 을 만들고
JavaScript 에서 data 를 정해서 넣어주고
템플릿을 쓰는게 답이다!!
최종적으로 아래와 같이 보여짐
Why Handlebars? (Mustache?)
• handlebars template 은 컴파일 된다.
• #if , #unless, #with, #each 등을 지원
• helper를 추가할 수 있음
• path 구조를 지원 {{#each ../person.name }}
• 5배에서 7배 handlebars가 더 빠름 : https://travis-ci.org/wycats/handlebars.js/builds/33392182#L538
Getting Started
• handlebars.js 파일 include
• 보여질 HTML 코드를 작성하고
• HTML 코드는 변경될 부분 ( 재사용 등에 의해 ) 을 {{}} expression으로 감싸 준다.
• 만들어진 HTML 코드는 다음과 같은 포맷안에 넣어준다.
• 이제 JavaScript 에서 위 Template 을 찾아 compile 한후
• 템플릿 안에 들어갈 Data 를 선언 한후 템플릿에 인자로 넣어준다.
• 마지막으로 나온 html 변수 안에는 HTML 이 들어있으므로, DOM 에 추가해주면 된다.
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div>
<script type="text/x-handlebars-template" id=“template"> </script>
var source = $( ‘#template’ ).html(); var template = Handlebars.compile( source );
var context = { title : “타이틀” , “body”: “바디” }; var html = template( context ) ;
$(‘body’).append( html );
<div class="entry"> <h1>타이틀</h1> <div class="body"> 바디 </div> </div>
Expression• 기본 사용 법 <h1>{{title}}</h1>
• 현재 context 안에 title 속성을 표현 하고 싶을 경우 {{ title.text }}( dot 사용 가능 )
• {{ title/text }} ( / 도 사용 가능 dot 와 같다. ) {{ this.title.text }} , {{ ./title.text }} 도 동일
• ../ 도 사용 가능 ( 부모 context에 접근 하려면 필요 )
• HTML 문법이 Data에 있으면,해당 HTML 문법도 표시
• {{{ expressions }}} 를 사용하면, 자동으로 없어짐
• Whitespace Control 를 하려면 expression 앞에 ~ 를 붙히면 된다.
Helper: Built -in • with : 템플릿에서 context 이동시에 사용
• each : 배열 형태 또는 object 형태의 context 에서 사용 : else는 데이터가 없을 경우
• each : @key , @index 를 키 값과 index 값을 표시 할수있음
Helper: Built -in • if : context 의 조건에 따라 사용
• if 는 해당 argument 가 falsy 일때 ( false, undefined, null, “” , [] ) 일때 동작 하지 않는다.
• else 와 같이 주로 같이 사용 됨
• unless : if helper 의 반대 개념으로 값이 falsy 일때 렌더링 된다.
• log : 템플릿이 실행 되는 동안 컨텍스트를 로깅 하기 위해 사용 : {{log “look”}}
Helpers: Custom• 기본 helper 를 제외 하고 다른 동작을 하는 helper 를 만들수 있음
• Handlebars.registerHelper() 를 사용
• registerHelper의 return 값은 자동으로 escape 처리가 됨 :
• escape 는 http://www.freeformatter.com/html-escape.html 참조
• escape 처리를 안하고 싶다면, return 하기전 new Handlebars.SafeString( [return value] ); 해주고 return을 해주면 된다. ]
• 헬퍼 다음 인자로 넣어주는 값들은 helper의 변수가 된다 ( 순서에 따라..)
Helpers: Custom• Hash Arguments
• custom helper 를 만들때 여러가지 조건 값들을 사용 할수 있음
• key = value 로 넣은 인자들은 options.hash.key = value 로 저장되어있음
• hash 는 마지막 인자로 넣어주어야 한다.
•
Comments• {{! }} or {{!-- --}} 를 사용
• HTML 내에서 주석 처리 할때 사용 위 2 포맷 모두 사용 가능.
• 해당 Comment는 최종 HTML 에서는 안보임
• HTML 에서 보여지는 Comment 를 원한다면 <!-- -->
Utility• 내장 함수로. 주로 string 처리 및에 유용 함
• Handlebars.Utils.escapeExpression(string)
• HTML 과 태그들을 String 으로 표현 : new Handlebars.SafeString().toString() 과 동일함
• Handlebars.Utils.isEmpty(value)
• value 에 값이 있는지 없는지 판단
• Handlebars.Utils.extend(obj, value)
• obj 에 value 확장 ( $.extend 와 동일 )
• Handlebars.Utils.toString(obj, value)
• toString 과 동일
• Handlebars.Utils.isArray(obj, value)
• obj 가 array 인지 판단
• Handlebars.Utils.isFunction(obj, value)
• obj 가 function인지 판단
Supported Environments
• EcamScript 3이 동작하는 환경이면 동작하게 설계
• Node.js
• Chrome
• Firefox
• Safari 5+
• Opera 11+
• IE 6+
