6.2.4 헬퍼에 반응하게 뷰 변경
이번에는 addressLisItem 뷰 코드 안에서 {{#if}} 문법을 사용하여 editing 헬퍼가 true를 반환할 경우 수정 모드를, false를 반환할 경우 뷰 모드를 보여주는 템플릿을 작성한다.
{{#if editing}}
...수정 모드 tr 코드...
{{#else}}
...뷰 모드 tr 코드...
{{#/if}}
이와 같은 형태로 템플릿을 수정해보자. 뷰 모드의 tr 코드는 이전 코드를 재사용한다. if 문과 수정 모드의 tr 코드를 작성한다. 변경된 addressLisItem 템플릿의 HTML 코드는 다음과 같다.
~/Projects/addressBook/client/addressList.html
...생략...
<template name="addressListItem">
{{#if editing}} <!-- 수정 모드 -->
<tr>
<td><input type="text" style="width:100%" name="name" value="{{name}}"/></td>
<td><input type="text" style="width:100%" name="phone" value="{{phone}}"/></td>
<td><input type="text" style="width:100%" name="email" value="{{email}}"/></td>
<td><input type="text" style="width:100%" name="company" value="{{company}}"/></td>
<td><input type="text" style="width:100%" name="birthday" value="{{birthday}}"/></td>
<td>
<button class="btn btn-info btn-sm" name="save">
<i class="glyphicon glyphicon-ok"></i> 저장
</button>
<button class="btn btn-default btn-sm" name="cancel">
<i class="glyphicon glyphicon-repeat"></i> 취소
</button>
</td>
</tr>
{{else}} <!-- 뷰 모드 (이전 tr 코드) -->
<tr>
<td><div class="edit-thing">{{name}}</div></td>
<td><div class="edit-thing">{{phone}}</div></td>
<td><div class="edit-thing">{{email}}</div></td>
<td><div class="edit-thing">{{company}}</div></td>
<td><div class="edit-thing">{{birthday}}</div></td>
<td>
<button class="btn btn-warning btn-sm" name="remove">
<i class="glyphicon glyphicon-trash"></i> 삭제
</button>
<button class="btn btn-info btn-sm" name="modify">
<i class="glyphicon glyphicon-wrench"></i> 수정
</button>
</td>
</tr>
{{/if}}
</template>
위 코드에서 else 구문은 이전 tr 코드다. 다만, 각 필드 값을 div로 감싸고 edit-thing 클래스를 지정했다. div를 클릭하면 라인(tr)을 변경 모드로 전환하기 위한 것이다.
이제 [name=save] 버튼을 클릭하면 저장하는 이벤트, [name=cancel] 버튼을 클릭하면 변경을 취소하는 이벤트, 끝으로 뷰 모드에서 텍스트를 직접 클릭했을 때 수정 모드로 전환하는 이벤트를 구현해보자.