더북(TheBook)

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] 버튼을 클릭하면 변경을 취소하는 이벤트, 끝으로 뷰 모드에서 텍스트를 직접 클릭했을 때 수정 모드로 전환하는 이벤트를 구현해보자.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.