상위 템플릿인 addressList는 {{#each list}} 구문 안에서 list 배열의 개수만큼 하위 템플릿 addressListItem을 삽입한다. 이때 list 배열의 각 요소를 하위 템플릿인 addressListItem에 주입해준다. 각각의 하위 템플릿 addressListItem은 주입 받은 데이터를 helper나 event 매니저 등에서 this로 접근할 수 있다.

뷰를 하위 템플릿으로 분리하였으니 매니저 함수도 역할을 하위 템플릿으로 넘겨준다. 기존 Template.addressList.event에 삭제 이벤트 처리 함수를 Template.addressListItem.events 함수로 이동한다.

~/Projects/addressBook/client/addressList.js

Template.addressList.helpers({
...생략...
});
 
Template.addressList.events({
    // addressLisitem으로 이동
});
 
Template.addressInput.events({
...생략...
});
 
Template.addressListItem.events({
    'click button[name=remove]'  (evt,tmpl){
        AddressBook.remove( { _id : this._id } );
    }
});

이제 각각의 tr을 템플릿으로 분리했다.