16.1~16.3 웹 페이지에서 댓글 목록 보기

댓글의 레이아웃

• 댓글은 크게 기존 댓글을 보여 주는 영역(_list)과 새 댓글을 입력하는 영역(_new)으로 나뉨

 

댓글 뷰 파일의 구성

• 댓글 뷰 파일의 디렉터리는 3개의 구조로 구성(_comments.mustache 아래 _new.mustahe,_list.mustache로 구성)
• 댓글 영역을 보여주는 뷰 파일(_comments.mustache)
• 댓글 목록을 보여주는 뷰 파일(_list.mustache)
• 새 댓글을 작성하는 뷰 파일(_new.mustahe)

 

{{#commentDtos}}{{/commentDtos}}

• 뷰페이지에서 모델에 등록된 데이터의 사용범위를 지정할때 사용하는 머스테치 문법
• {{#모델명}}부터{{/모델명}}까지 범위안에서 "모델명"에 저장된 데이터를 사용할 수 있으며 데이터 수만큼 해당 범위를 반복함

컨트롤러에 모델등록

List<CommentDto> commentsDtos = commentService.comments(id);
model.addAttribute("commentDtos",commentsDtos);

 

_comments.mustache

<div>
    <!- 댓글 목록 보기 -->
    {{>comments/_list}}
    <!- 새 댓글 작성하기 -->
    {{>comments/_new}}
</div>

 

_list.mustahce

<div id="comments-list">
    {{#commentDtos}}
        <div class="card m-2" id="comments-{{id}}">
            <div class="card-header">
                {{nickname}}
            </div>
            <div class="card-body">
                {{body}}
            </div>
        </div>
    {{/commentDtos}}
</div>

 

_new.mustache는 다음장에서 진행