Handlebars.js: ๋ถ€๋ชจ์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋Š” ์ค‘์ฒฉ ๋ฐ˜๋ณต

์— ๋งŒ๋“  2011๋…„ 10์›” 18์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: handlebars-lang/handlebars.js

http://stackoverflow.com/questions/552934/what-javascript-templating-engine-do-you-recommend/7812081#7812081 ์—์„œ ๋ฌธ์ œ๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

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

{{#each families}}
  {{#each members}}
    <p>{{ ../surname }}</p>
    <p>{{ name }}</p>
  {{/each}}
{{/each}}

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

ํ•œ ๊ฐ€์ง€ ๊ฐ„๋‹จํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์€ ๋„์šฐ๋ฏธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

{{#each animals}}
  {{#each organs}}
    {{get .. this}}
  {{/each}}
{{/each}}
Handlebars.registerHelper('get', function(obj, prop) {
  return obj[prop];
});

์ด ๋ฌธ์ œ๋ฅผ ๋‹ค์‹œ ์ œ๊ธฐํ•ด์„œ ์ฃ„์†กํ•˜์ง€๋งŒ ์ˆœํ™˜ ์ฐธ์กฐ๋ฅผ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š” ํ•œ ์ด 'get' ๋„์šฐ๋ฏธ๊ฐ€ ๋ถ€๋ชจ์—๊ฒŒ ์•ก์„ธ์Šค ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

"{{get .. this}}"์ด(๊ฐ€) ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ด๊ฒƒ์ด ๊ธฐ๊ด€์ด๋ผ๋ฉด ์–ด๋–ป๊ฒŒ ๊ทธ๊ฒƒ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ€๋ชจ ๋™๋ฌผ์„ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” handlebars.js๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€์กฑ ๋ชฉ๋ก์„ ๋ฐ˜๋ณตํ•œ ๋‹ค์Œ ํ•ด๋‹น ๊ฐ€์กฑ์˜ ๊ตฌ์„ฑ์›์„ ๋ฐ˜๋ณตํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฃจํ”„ ๋‚ด์—์„œ ๋‘˜ ๋‹ค์˜ ์†์„ฑ์„ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋‘ ๋ฒˆ์งธ ๋ฐ˜๋ณต์— ๋“ค์–ด๊ฐ€๋ฉด ๊ฐ€์กฑ ๋ณ€์ˆ˜๊ฐ€ ํ•˜๋‚˜๋„ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

{{#each families}}
  {{#each members}}
    <p>{{ ( here I want a family name property ) }}</p>
    <p>{{ ( here I want a member name property ) }}</p>
  {{/each}}
{{/each}}

ํ•ธ๋“ค๋ฐ”์—์„œ ๊ฐ€๋Šฅํ•œ๊ฐ€์š”? ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋ฉด ๊ดœ์ฐฎ์Šต๋‹ˆ๋‹ค. ๋„์›€์„ ์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค!

{{#each families}}
  {{#each members}}
    <p>{{ ../surname }}</p>
    <p>{{ name }}</p>
  {{/each}}
{{/each}}

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„ ์ €๋Š” ์ง€๊ธˆ ๋…ธ๋“œ/์ต์Šคํ”„๋ ˆ์Šค๋ฅผ ๋ฐฐ์šฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋Š” ์ €์—๊ฒŒ ์ ํ•ฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์ต์Šคํ”„๋ ˆ์Šค ํ•ธ๋“ค๋ฐ”๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋„์™€์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ? ์ต์Šคํ”„๋ ˆ์Šค ํ•ธ๋“ค๋ฐ”๋กœ ๊ฐ€๋Šฅํ•œ๊ฐ€์š”? ์—ฌ๊ธฐ ๋‚ด ์ฝ”๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. gpareaData ๋Š” ๋ฐ˜๋ณต๋˜์ง€๋งŒ ๋ถ„๊ธฐ๋Š” ๋ฐ˜๋ณต๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค .

{{#each gpareaData}}
  <tr>
    <td>
       <select class="form-control" name="gp_branch[]">
           <option value="{{id}}">{{desc}}</option>
             {{#each branch}}
           <option value="{{id}}">{{branch_desc}}</option>
             {{/each}}
       </select>        
     </td>
    <td><button type="button" class="btn btn-primary btn-sm" id="addRws3"><i class="fa fa-plus"></i></button></td>
</tr>
{{/each}}

{{#all๋ฐ์ดํ„ฐ}}
๋ชจ๋‘

{{#assignedData}}
ํ• ๋‹น ๋œ


{{#ifEqual ID ์ฝ”์Šค ID }}
{{์ œ๋ชฉ}}

{{๋˜ ๋‹ค๋ฅธ}}
{{์ œ๋ชฉ}}

{{/ifEqual}}

{{/assignedData}}
{{/allData}}
๋‚ด ์•ฑ ์ปจํŠธ๋กค์€ ๋‚ด๋ถ€ ๋ฃจํ”„์— ๋“ค์–ด๊ฐ€์ง€๋„ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ƒฅ ์ธ์‡„
๋ชจ๋‘
๋ชจ๋‘
๋ชจ๋‘
์™ ์ง€ ๋งํ•ด์ค˜?
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰