Mustache.js: ๋ถ€๋ถ„์ ์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2010๋…„ 03์›” 11์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: janl/mustache.js

๋™์ผํ•œ ๋””๋ ‰ํ† ๋ฆฌ์— ๊ฐ„๋‹จํ•œ ๋ถ€๋ถ„ ํ…œํ”Œ๋ฆฟ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
๋‘˜ ๋‹ค ์‹œ๋„ํ–ˆ์Šต๋‹ˆ๋‹ค(header.html.mu๊ฐ€ ๊ธฐ๋ณธ template.html.mu์™€ ๋™์ผํ•œ ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ๋Š” ๊ฒฝ์šฐ).


{{foo}}
{{ {{>header.html}}

์•„๋ฌด๊ฒƒ๋„ ์ž‘๋™ํ•˜์ง€ ์•Š์ง€๋งŒ header.html์— ์žˆ๋Š” ๋‚ด์šฉ์€ ํฌํ•จํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

์—ฌ๊ธฐ์„œ ํ•ต์‹ฌ์€ to_html()์„ ํ˜ธ์ถœํ•˜๊ณ  ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ๋‚ด์šฉ์„ ์ „๋‹ฌํ•˜๊ธฐ ์ „์— ์–ด๋”˜๊ฐ€์—์„œ ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์„ ๋กœ๋“œํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

var ๋ณด๊ธฐ = {
๋ถ€๋ถ„: {
ํ‘ธ: 1
},
์ด๋ฆ„: "์ž”"
};

var template = "์•ˆ๋…•ํ•˜์„ธ์š” {{name}}. {{>partial}} foo๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.";

var partial_html = "{{foo}}";

Mustache.to_html(๋ณด๊ธฐ, ํ…œํ”Œ๋ฆฟ, {
๋ถ€๋ถ„: partial_html
});

... ์ด ๋ฌธ์„œ๋ฅผ ๋ฌธ์„œ์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. - ์ €๋Š” ๋ถ€๋ถ„์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์ด์œ ์— ๋Œ€ํ•ด ๋จธ๋ฆฌ๋ฅผ ๊ธ๋Š” ๋ฐ ํ•œ ์‹œ๊ฐ„ ์ด์ƒ์„ ๋ณด๋ƒˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

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

๋ถ€๋ถ„์ ์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. examples/ ๋””๋ ‰ํ† ๋ฆฌ์˜ ์˜ˆ์ œ์™€ Readme์˜ ๋ฌธ์„œ๋ฅผ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค. mustache.js๋Š” ๋™์ผํ•œ ๋””๋ ‰ํ† ๋ฆฌ์— ์žˆ๋Š” ํŒŒ์ผ์„ ์ž๋™์œผ๋กœ ๋กœ๋“œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค(JavaScript์—๋Š” file-io๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— :)

"์ž๋™์œผ๋กœ ๋ชจ๋“  ํŒŒ์ผ ๋กœ๋“œ"๋Š” ๋ฌด์—‡์„ ์˜๋ฏธํ•ฉ๋‹ˆ๊นŒ? ๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ • ํ•ด ๋ด…์‹œ๋‹ค :

๋ณด๊ธฐ.js
ํ…œํ”Œ๋ฆฟ/header.html.mu
ํ…œํ”Œ๋ฆฟ/body.html.mu

view.js์— ๋‹ค์Œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. Mu.templateRoot = './templates';

๊ทธ๋Ÿฐ ๋‹ค์Œ "header.html"์„ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

header.html.mu๋Š”

{{>body.html}}

๊ทธ๋Ÿฌ๋‚˜ ๊ฒฐ์ฝ” ํฌํ•จ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ๋ญ”๊ฐ€๋ฅผ ๋†“์น˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ์ง„ํ–‰ ์ค‘์ธ ๋””๋ ‰ํ† ๋ฆฌ ๊ฒฝ๋กœ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๋ถ€๋ถ„์ ์œผ๋กœ ์‹คํ–‰๋˜๋Š” ํŠน์ • js ์˜ˆ์ œ๋ฅผ ์•Œ๋ ค์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋งˆํฌ์—… .html.mu๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ ์•„๋ฌด ์ž‘์—…๋„ ์ˆ˜ํ–‰ํ•˜๋Š” js๋Š” ๋ณผ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค...
๊ฐ์‚ฌ,
๊ฐ์‚ฌ....

์˜ค, test.js๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๊ฐ€ readFileSYnc๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ํ…œํ”Œ๋ฆฟ์„ ์ปดํŒŒ์ผํ•ด์•ผ ํ•œ๋‹ค๋Š” ๋ง์ž…๋‹ˆ๊นŒ?

๊ณ„์†๋œ ํˆฌ์Ÿ. ํ…œํ”Œ๋ฆฟ์—์„œ ๋ถ€๋ถ„์„ ์‚ฌ์šฉํ•˜๋Š” nodejs์—์„œ ์‹คํ–‰๋˜๋Š” ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์—ฌ๊ธฐ์„œ ํ•ต์‹ฌ์€ to_html() ๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „์— ์–ด๋”˜๊ฐ€์—์„œ ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์„ ๋กœ๋“œํ•˜๊ณ  ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ๋‚ด์šฉ์„ ์ „๋‹ฌํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

var view = {
  partial: {
    foo: 1
  },
  name: "Jan"
};

var template = "Hi {{name}}. you have {{>partial}} foos.";

var partial_html = "{{foo}}";

Mustache.to_html(view, template, {
   partial: partial_html
});

/์‹ ๊ฒฝ ์“ฐ์ง€ ๋งˆ์š”.

๋ฌธ์ œ๋Š” ๋‚ด ํ…œํ”Œ๋ฆฟ์—

, ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ํญํŒŒ์‹œํ‚ค๋Š” .... ๋ถ„๋ช…ํžˆ ' ๋”ฐ์˜ดํ‘œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
๋ถ€๋ถ„์ ์œผ๋กœ...

์—ฌ๊ธฐ์„œ ํ•ต์‹ฌ์€ to_html()์„ ํ˜ธ์ถœํ•˜๊ณ  ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ๋‚ด์šฉ์„ ์ „๋‹ฌํ•˜๊ธฐ ์ „์— ์–ด๋”˜๊ฐ€์—์„œ ๋ชจ๋“  ํ…œํ”Œ๋ฆฟ ํŒŒ์ผ์„ ๋กœ๋“œํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

var ๋ณด๊ธฐ = {
๋ถ€๋ถ„: {
ํ‘ธ: 1
},
์ด๋ฆ„: "์ž”"
};

var template = "์•ˆ๋…•ํ•˜์„ธ์š” {{name}}. {{>partial}} foo๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.";

var partial_html = "{{foo}}";

Mustache.to_html(๋ณด๊ธฐ, ํ…œํ”Œ๋ฆฟ, {
๋ถ€๋ถ„: partial_html
});

... ์ด ๋ฌธ์„œ๋ฅผ ๋ฌธ์„œ์— ์ถ”๊ฐ€ํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. - ์ €๋Š” ๋ถ€๋ถ„์ด ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ์ด์œ ์— ๋Œ€ํ•ด ๋จธ๋ฆฌ๋ฅผ ๊ธ๋Š” ๋ฐ ํ•œ ์‹œ๊ฐ„ ์ด์ƒ์„ ๋ณด๋ƒˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

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

๊ด€๋ จ ๋ฌธ์ œ

SmasherHell picture SmasherHell  ยท  18์ฝ”๋ฉ˜ํŠธ

amper5and picture amper5and  ยท  5์ฝ”๋ฉ˜ํŠธ

mbrodala picture mbrodala  ยท  16์ฝ”๋ฉ˜ํŠธ

Immortalin picture Immortalin  ยท  12์ฝ”๋ฉ˜ํŠธ

kuldeepdhaka picture kuldeepdhaka  ยท  9์ฝ”๋ฉ˜ํŠธ
bleepcoder.com์€ ๊ณต๊ฐœ์ ์œผ๋กœ ๋ผ์ด์„ ์Šค ๋œ GitHub ์ •๋ณด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „ ์„ธ๊ณ„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๋ฌธ์ œ์— ๋Œ€ํ•œ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” GitHub, Inc. ๋˜๋Š” ํ”„๋กœ์ ํŠธ์— GitHub๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž์™€ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ์„œ๋ฒ„์—์„œ ๋น„๋””์˜ค ๋‚˜ ์ด๋ฏธ์ง€๋ฅผ ํ˜ธ์ŠคํŒ…ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ถŒ๋ฆฌ๋Š” ํ•ด๋‹น ์†Œ์œ ์ž์—๊ฒŒ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ํŽ˜์ด์ง€์˜ ์†Œ์Šค: ์ถœ์ฒ˜

์ธ๊ธฐ์žˆ๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด
์ธ๊ธฐ์žˆ๋Š” GitHub ํ”„๋กœ์ ํŠธ
๋” ๋งŽ์€ GitHub ํ”„๋กœ์ ํŠธ

ยฉ 2024 bleepcoder.com - Contact
Made with in the Dominican Republic.
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.