Mustache.js: ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜๋œ ๋ฐฐ์—ด

์— ๋งŒ๋“  2011๋…„ 12์›” 09์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: janl/mustache.js

์ด ๋ฐฐ์—ด์ด ์žˆ์Šต๋‹ˆ๋‹ค.
"์˜ต์…˜": [
"์—‘์Šค",
"์™€์ด",
"์ง€"
]

"{{Optionen}}"์„ ํ˜ธ์ถœํ•˜๋ฉด "x,y,z"๊ฐ€ ๋ฐ˜ํ™˜๋ฉ๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ["x", "y", "z"]๋ฅผ ์–ป์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๋ฒ„๊ทธ์ž…๋‹ˆ๊นŒ ์•„๋‹ˆ๋ฉด ์ œ๊ฐ€ ๋†“์น˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ์žˆ์Šต๋‹ˆ๊นŒ?

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

์˜ˆ, ์ด๊ฒƒ์€ ์˜๋„๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๊ฐœ์ฒด์—์„œ ์ผ์น˜ํ•˜๋Š” ๋ชจ๋“  ํ‚ค๋Š” "falsy"๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ ๋ฌธ์ž์—ด๋กœ ๊ฐ•์ œ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค. ๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ JavaScript๋Š” ์ด๋ฅผ x,y,z ํ˜•์‹์˜ ๋ฌธ์ž์—ด๋กœ ๊ฐ•์ œ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค(์ง์ ‘ ์‹œ๋„: ๋ฐฉํ™”๋ฒ”์„ ์—ด๊ณ  ["x","y","z"].toString() ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๊ฒฐ๊ณผ๋Š” x,y,z ์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๊ฒƒ์„ ์›ํ•˜๋ฉด ํ…œํ”Œ๋ฆฟ์„ ์ˆ˜๋™์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ:

[{{#Optionen}}"{{.}}",{{/Optionen}}]

๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

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

์˜ˆ, ์ด๊ฒƒ์€ ์˜๋„๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๊ฐœ์ฒด์—์„œ ์ผ์น˜ํ•˜๋Š” ๋ชจ๋“  ํ‚ค๋Š” "falsy"๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ ๋ฌธ์ž์—ด๋กœ ๊ฐ•์ œ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค. ๋ฐฐ์—ด์˜ ๊ฒฝ์šฐ JavaScript๋Š” ์ด๋ฅผ x,y,z ํ˜•์‹์˜ ๋ฌธ์ž์—ด๋กœ ๊ฐ•์ œ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค(์ง์ ‘ ์‹œ๋„: ๋ฐฉํ™”๋ฒ”์„ ์—ด๊ณ  ["x","y","z"].toString() ๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๊ฒฐ๊ณผ๋Š” x,y,z ์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ๊ฒƒ์„ ์›ํ•˜๋ฉด ํ…œํ”Œ๋ฆฟ์„ ์ˆ˜๋™์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ:

[{{#Optionen}}"{{.}}",{{/Optionen}}]

๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ๊ฝค ๊ฐ€๊น์Šต๋‹ˆ๋‹ค. [{{#Optionen}}"{{.}}", {{/Optionen}}] ์‚ฌ์šฉ ["x", "y", "z", ]
๋ถˆํ–‰ํžˆ๋„ ๋งˆ์ง€๋ง‰ ์‰ผํ‘œ๋Š” ์ด ๊ฐ’์„ ๋‹ค์‹œ ์ €์žฅํ•  ๋•Œ ๋ฌธ์ œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค(์˜ˆ: ์ฒ˜์Œ์— "a"๋ฅผ ์ถ”๊ฐ€ํ•œ ํ›„). ๋งˆ์ง€๋ง‰ ์‰ผํ‘œ๋ฅผ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?
์•„, ์ €์žฅ ํ›„ ["a", "x", "y", "z", ] "[\"a,x,y,z\", ]"
a,x,y,z๋ฅผ ์ €์žฅํ•˜๋ฉด ์˜ฌ๋ฐ”๋ฅธ ๋ฐฐ์—ด ["a", "x", "y", "z"]์ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.
x, y, z๋ฅผ ๊ณ ์ˆ˜ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
ํฌ๋ง, ๋‚˜๋Š” ์‰ผํ‘œ๋กœ ๊ฐ’์„ ์ €์žฅํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค ...
๊ธ€์Ž„, ๋‚˜๋Š” ์ฝง์ˆ˜์—ผ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ํ•œ ์‰ฌ์šด ํ•ด๊ฒฐ์ฑ…์€ ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
๋‚ด๊ฐ€ ํ‹€๋ ธ์–ด ์ˆ˜์ •ํ•ด์ค˜ ๋ฌธ์ œ๋ฅผ ๋‹ซ์Šต๋‹ˆ๋‹ค.
๋„์™€์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ข…๋ฃŒ๋œ ๋ฌธ์ œ

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ๋ฌด์—‡์„ ํ•˜๋ ค๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. "์ €์žฅ"์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š”์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์ง€๋งŒ Mustache์—์„œ ๋งˆ์ง€๋ง‰ ์‰ผํ‘œ๋ฅผ ์ œ๊ฑฐํ•˜๋ ค๋ฉด JavaScript์—์„œ ๋ชฉ๋ก์„ ๋ฏธ๋ฆฌ ๋ฐ˜๋ณตํ•˜์—ฌ ํ”Œ๋ž˜๊ทธ ๋ณ€์ˆ˜๋ฅผ ๋„์ž…ํ•˜๋Š” ๊ฒƒ์ด ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐ€์น˜๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ๋ฌธ์ œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. @janl ์ด ๊ตฌ์ถ•ํ•˜๊ณ  ์žˆ๋Š” ๋„์šฐ๋ฏธ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด Mustache ์ž์ฒด์—์„œ ์ด ๋ฌธ์ œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ต์ˆ™ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋˜๋Š” JSON.stringify ๋ฐ JSON.parse(๋ธŒ๋ผ์šฐ์ €์— ๋‚ด์žฅ)๋ฅผ ์‚ดํŽด๋ณด์‹ญ์‹œ์˜ค. ์ด๋Š” ๋ฐฐ์—ด์„ ์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์—ญ์ง๋ ฌํ™”/์ง๋ ฌํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค: .split(", ") ํ•ด๋ƒˆ์Šต๋‹ˆ๋‹ค!
๊ทธ๋ž˜์„œ ์ฝง์ˆ˜์—ผ์ด ์žˆ๋Š” ๊ฐ’์„ ํ•„๋“œ์— ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ saveDoc์œผ๋กœ ํ•„๋“œ์— ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ๋•Œ .split(", )์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

2011/12/12 ์‚ฌํ•˜๋ธŒ ์•ผ์ฆˆ๋‹ค๋‹ˆ <
๋‹ต์žฅ@reply.github.com

์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ๋ฌด์—‡์„ ํ•˜๋ ค๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. "์ €์žฅ"์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š”์ง€ ์ž˜ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ,
๊ทธ๋Ÿฌ๋‚˜ Mustache์˜ ๋งˆ์ง€๋ง‰ ์‰ผํ‘œ๋ฅผ ์ œ๊ฑฐํ•˜๋Š” ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์€
JavaScript์—์„œ ๋ชฉ๋ก์„ ๋ฏธ๋ฆฌ ๋ฐ˜๋ณตํ•˜์—ฌ ํ”Œ๋ž˜๊ทธ ๋ณ€์ˆ˜๋ฅผ ๋„์ž…ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๊ทธ๊ฒƒ์€ ๊ฐ€์น˜๋ณด๋‹ค ๋นจ๋ฆฌ ๋ฌธ์ œ๊ฐ€๋ฉ๋‹ˆ๋‹ค. ๋„์šฐ๋ฏธ๋“ค ๊ฐ™์•„์š”
@janl ์ด ๊ตฌ์ถ•ํ•˜๊ณ  ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ฉด ์ด ๋ฌธ์ œ๋ฅผ ๋” ์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ฝง์ˆ˜์—ผ ๊ทธ ์ž์ฒด์ธ๋ฐ ์ œ๊ฐ€ ์ž˜ ๋ชฐ๋ผ์„œ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋˜๋Š” JSON.stringify ๋ฐ JSON.parse(๊ธฐ๋ณธ ์ œ๊ณต
๋ธŒ๋ผ์šฐ์ €) ๋ฐฐ์—ด์„ ์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์—ญ์ง๋ ฌํ™”/์ง๋ ฌํ™”ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.


์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ฑฐ๋‚˜ GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/janl/mustache.js/issues/146#issuecomment -3100397

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

๊ด€๋ จ ๋ฌธ์ œ

chlab picture chlab  ยท  11์ฝ”๋ฉ˜ํŠธ

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

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

kuldeepdhaka picture kuldeepdhaka  ยท  9์ฝ”๋ฉ˜ํŠธ

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