Handlebars.js: ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ๋“ฑ๋กํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 02์›” 22์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: handlebars-lang/handlebars.js

๋•Œ๋กœ๋Š” ํ…œํ”Œ๋ฆฟ์— ์ „์—ญ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
๋ช‡ ๊ฐ€์ง€ ์˜ˆ์—๋Š” ๋‹ค์Œ์ด ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ํ™œ์„ฑ ์‚ฌ์šฉ์ž ๊ฐœ์ฒด์ž…๋‹ˆ๋‹ค.
  • ์•ฑ ๊ตฌ์„ฑ(์ œ๋ชฉ, ์„ค๋ช…, ๋ฉ”ํƒ€)
  • ๊ฒฝ๋กœ ์ •๋ณด(๊ฒฝ๋กœ, ํ•ด์‹œ ๋“ฑ).

๋‚˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ๋ฉ‹์งˆ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค.

var hbs = require("handlebars");

hbs.registerGlobal({
   title: "myapp"
});

@global.title , @title ๋˜๋Š” title ๋ฅผ ํ†ตํ•ด ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ƒ๊ฐ?

docs-needed

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@kpdecker template(context, {data: {global: global}}) ๋Š” ๋ช…์‹œ์ ์œผ๋กœ ๋ฌธ์„œํ™”๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋‚ด๊ฐ€ ๋ณธ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๊ฒƒ์€ template({}, {data: {level: Handlebars.logger.WARN}})

๊ทธ๋Ÿฌ๋‚˜ ์„ค๋ช…์„œ ์—๋Š” ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์–ธ๊ธ‰์ด ์—†์Šต๋‹ˆ๋‹ค .

๋ชจ๋“  7 ๋Œ“๊ธ€

๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ๋” ์ƒ๊ฐํ•˜๊ณ  ์žˆ์—ˆ๊ณ  ์ธ๋ผ์ธ ๋„์šฐ๋ฏธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ๋‹น์‹ ์ด ์›ํ•˜๋Š” ๊ฒƒ์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

var hbs = require("handlebars");
var myGlobal = {
   title: "myapp"
};

hbs.registerHelper('global', function(key){
  return myGlobal[key];
});
{{! in your template }}
<div>{{global "title"}}</div>

๊ทธ๋ฆฌ๊ณ  myGlobal ๋กœ ๋ฌด์—‡์ด๋“  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹น์‹ ์€ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

define('myGlobal', function(){
  return {
    title: "myapp"
  };
});

...
var myGlobal = require('myGlobal');

myGlobal['newKey'] = 'something';

...

var hbs = require("handlebars");
var myGlobal = require('myGlobal');

hbs.registerHelper('global', function(key){
  return myGlobal[key];
});

๋‹น์—ฐํžˆ ํ‚ค๋ฅผ ๋ฎ์–ด์“ฐ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋‹จ์ ์ด ์žˆ์ง€๋งŒ ๊ทธ๊ฒŒ ์ „๋ถ€์ž…๋‹ˆ๋‹ค.

ํ•ธ๋“ค๋ฐ” ์ž์ฒด ๋‚ด์—์„œ ์ด๊ฒƒ์„ ์ง€์›ํ•˜๋ ค๋ฉด ์ ์€ ์ด๋“์„ ์œ„ํ•ด ๋งŽ์€ ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค(IMO).

@rafde ์˜ ๋„์šฐ๋ฏธ ์ œ์•ˆ์ด๋‚˜ ๋ฐ์ดํ„ฐ ํ•„๋“œ์— ์ „์—ญ์„ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ์—ฌ๋Ÿฌ ์˜ต์…˜์ด ์žˆ์œผ๋ฉฐ ์‹ค์ œ๋กœ ์œ„์—์„œ ์ œ์•ˆํ•œ ๊ตฌ๋ฌธ๊ณผ ํ•จ๊ป˜ ์ž‘๋™ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

template(context, {data: {global: global}})

{{@global.foo}} ์ฐฝ์˜ ๋ชจ๋“  ๊ฒƒ์„ ๋…ธ์ถœํ•ด์•ผ ํ•˜์ง€๋งŒ ๋‚˜๋Š” ์ด๊ฒƒ์„ ํ…Œ์ŠคํŠธํ•˜์ง€ ์•Š์•˜์œผ๋ฉฐ ์ด๊ฒƒ์ด ์‹ค์ œ๋กœ ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@kpdecker template(context, {data: {global: global}}) ๋Š” ๋ช…์‹œ์ ์œผ๋กœ ๋ฌธ์„œํ™”๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋‚ด๊ฐ€ ๋ณธ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๊ฒƒ์€ template({}, {data: {level: Handlebars.logger.WARN}})

๊ทธ๋Ÿฌ๋‚˜ ์„ค๋ช…์„œ ์—๋Š” ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์–ธ๊ธ‰์ด ์—†์Šต๋‹ˆ๋‹ค .

๋ฌธ์„œ๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์ง€๋งŒ ๊ฐœ์„ ์— ๋„์›€์ด ๋œ๋‹ค๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๊ด‘๋ฒ”์œ„ํ•˜๊ฒŒ ํ…Œ์ŠคํŠธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค: https://github.com/wycats/handlebars.js/blob/master/spec/data.js#L1

๋ณ€์ˆ˜๊ฐ€ ์•„๋‹Œ ๊ฐ์ฒด์— ํ‚ค/๊ฐ’ ์Œ์„ ๋‹จ์ˆœํžˆ ์ •์˜ํ•˜์—ฌ ์ด๋ฅผ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์—†๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

glabalPair = {title: "Title"};

https://github.com/wycats/handlebars.js/blob/master/spec/data.js#L1 ์ด ๋‹ต์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ๋‹ซ์ง€๋งŒ ๋ฌธ์„œ๋Š” ์—ฌ์ „ํžˆ ์ถ”๊ฐ€๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์•„์ง ๋ฌธ์„œํ™”๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰