[Mustache] Object List 관리하기

Mutache를 통해 HTML에 데이터를 렌더링 하는 방식으로 프로젝트를 진행중에 list 객체에 관련해서 정리하고싶은 내용이 몇가지 있어 기록해두기로 한다.

 

• HTML에서 List 객체 사용하기

// js rendering data
list = [{
          "name" : "hong",
          "age"  : 20
        },
        {
          "name" : "kim",
          "age"  : 25
        }]
        
// html
{{#list}}
	{{name}} - {{age}}
{{/list}}
         
// result
hong - 20
kim - 25

• `js rendering data`에서 list 객체에 데이터가 존재하기 때문에 `html`에서 데이터가 출력됨
• 만약 list 객체가 비어있는 객체일 경우에는 `{{#list}} ~ {{/list}}` 내부에 있는 코드는 실행되지 않음
  • 즉, 해당 `{{#list}} ~ {{/list}}` 내부에는 list 객체가 존재할 경우 실행되는 코드만 정의되어야 함

---

• HTML 에서 List 객체 index 가져오기

// 조건: 5개의 input 태그가 존재해야 하고, 데이터가 있을 경우 해당 값을 보여주고, 없을 경우 placehold를 출력

// js rendering data
list = [{
          "name" : "hong",
          "age"  : 20
        },
        {
          "name" : "kim",
          "age"  : 25
        }]
        
// html
<input placeholder="이름" {{#list.0}} value="{{name}}" {{/list.0}}>
<input placeholder="이름" {{#list.1}} value="{{name}}" {{/list.1}}>
<input placeholder="이름" {{#list.2}} value="{{name}}" {{/list.2}}>
<input placeholder="이름" {{#list.3}} value="{{name}}" {{/list.3}}>
<input placeholder="이름" {{#list.4}} value="{{name}}" {{/list.4}}>

//결과