More Related Content
Similar to Handlebars (20)
Handlebars
- 2. Table of Contents
โข Handlebars ?
โข Why Handlebars? (Mustache?)
โข Getting Started
โข Expression
โข Helper
โข built-in
โข custom
โข Comments
โข Built-in Utility
- 3. Handlebars?
โข http://handlebarsjs.com/
โข https://github.com/wycats/handlebars.js/
โข Mustache ํ
ํ๋ฆฟ ์ธ์ด๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ง ํ์ฅ ํ
ํ๋ฆฟ
โข View ์ Code ๋ฅผ ๋ถ๋ฆฌ ํ๊ธฐ ์ํด ๋ง๋ค์ด์ง : ๋ก์ง ๊ณผ presentation ์ ๋ถ๋ฆฌ
โข Mustache ํ
ํ๋ฆฟ์ Handlebars ํ์ฅ ๊ธฐ๋ฅ๋ค์ ์ฌ์ฉ ํ ์ ์์
โข Web site๋ณด๋ค๋ Web app์ ๋ ์ ํฉ
โข ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ์์ HTML Element ๋ฅผ ๋ฃ์ง ์๊ธฐ ์ํด
- 4. 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 ์คํ์ผ๋ก ๋ณ๊ฒฝ๋ ํด๋ณด๊ณ ..
๋ชจ๋ํ๋ ํด๋ณด์ง๋ง..
- 5. 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 ๋ฅผ ์ ํด์ ๋ฃ์ด์ฃผ๊ณ
ํ
ํ๋ฆฟ์ ์ฐ๋๊ฒ ๋ต์ด๋ค!!
์ต์ข
์ ์ผ๋ก ์๋์ ๊ฐ์ด ๋ณด์ฌ์ง
- 6. 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
- 7. 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>
- 8. 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 ์์ ~ ๋ฅผ ๋ถํ๋ฉด ๋๋ค.
- 9. Helper: Built -in
โข with : ํ
ํ๋ฆฟ์์ context ์ด๋์์ ์ฌ์ฉ
โข each : ๋ฐฐ์ด ํํ ๋๋ object ํํ์ context ์์ ์ฌ์ฉ : else๋ ๋ฐ์ดํฐ๊ฐ ์์ ๊ฒฝ์ฐ
โข each : @key , @index ๋ฅผ ํค ๊ฐ๊ณผ index ๊ฐ์ ํ์ ํ ์์์
- 10. Helper: Built -in
โข if : context ์ ์กฐ๊ฑด์ ๋ฐ๋ผ ์ฌ์ฉ
โข if ๋ ํด๋น argument ๊ฐ falsy ์ผ๋ ( false, undefined, null, โโ , [] ) ์ผ๋ ๋์ ํ์ง ์๋๋ค.
โข else ์ ๊ฐ์ด ์ฃผ๋ก ๊ฐ์ด ์ฌ์ฉ ๋จ
โข unless : if helper ์ ๋ฐ๋ ๊ฐ๋
์ผ๋ก ๊ฐ์ด falsy ์ผ๋ ๋ ๋๋ง ๋๋ค.
โข log : ํ
ํ๋ฆฟ์ด ์คํ ๋๋ ๋์ ์ปจํ
์คํธ๋ฅผ ๋ก๊น
ํ๊ธฐ ์ํด ์ฌ์ฉ : {{log โlookโ}}
- 11. 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์ ๋ณ์๊ฐ ๋๋ค ( ์์์ ๋ฐ๋ผ..)
- 12. Helpers: Custom
โข Hash Arguments
โข custom helper ๋ฅผ ๋ง๋ค๋ ์ฌ๋ฌ๊ฐ์ง ์กฐ๊ฑด ๊ฐ๋ค์ ์ฌ์ฉ ํ ์ ์์
โข key = value ๋ก ๋ฃ์ ์ธ์๋ค์ options.hash.key = value ๋ก ์ ์ฅ๋์ด์์
โข hash ๋ ๋ง์ง๋ง ์ธ์๋ก ๋ฃ์ด์ฃผ์ด์ผ ํ๋ค.
โข
- 13. Comments
โข {{! }} or {{!-- --}} ๋ฅผ ์ฌ์ฉ
โข HTML ๋ด์์ ์ฃผ์ ์ฒ๋ฆฌ ํ ๋ ์ฌ์ฉ ์ 2 ํฌ๋งท ๋ชจ๋ ์ฌ์ฉ ๊ฐ๋ฅ.
โข ํด๋น Comment๋ ์ต์ข
HTML ์์๋ ์๋ณด์
โข HTML ์์ ๋ณด์ฌ์ง๋ Comment ๋ฅผ ์ํ๋ค๋ฉด <!-- -->
- 14. 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์ธ์ง ํ๋จ