[Handelbars] 콜렉션(List) isEmpty 조건 체크 하기

핸들바스(Handelbars) 템플릿 사용시 리스트나 배열같은 콜렉션이 비어 있을경우(isEmpty) 조건 처리 하는 방법을 간단히 포스팅합니다!

예를 들어 리스트에 데이터가 있으면 아이템 목록을 보여주고  없을 경우 “조회된 결과가 없습니다” 이런식으로 화면을 렌더링 하고 싶을때 아래와 같이 반복문인 “each” 와 함께 “else”를 같이 사용해 주시면 됩니다.

{{#each items}}
<div>{{itemName}}</div>
{{else}}
<div>no item</div>
{{/each}}

콜렉션에 데이터가 존재할 경우(Case1)와 비어있는 경우(Case2) 각각 실행 결과 입니다. 

/* Case1 */ 
{
    "items": [
    { "itemName": "item1" },
    { "itemName": "item2" },
    { "itemName": "item3"}
    ]
}

/* Case2 */ 
{
    "items": []
}

▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

<!-- Case1 -->
<div>item1</div>
<div>item2</div>
<div>item3</div>

<!-- Case2 -->
<div>no item</div>

아래와 같이 if문과 함께 length 속성을 이용해서 분기 처리하는 것도 가능합니다.  콜렉션이 비어 있어 ength가 0을 리턴한다면 거짓조건에 해당하여 조건문 안의 엘리먼트는 렌더링 되지 않습니다.

{{#if items.length}}
…render
{{/if}}