mustache 로 페이징 처리 중 고민이 있습니다.

2017-10-17 14:46

안녕하세요. 우선 감사의 말씀을 드립니다.

자바지기님의 다양한 반복 주기 강좌들을 통해 많이 배웠습니다.

'Spring-Boot, JPA로 질문/답변 게시판 구현 과정'을 보고 mustache를 처음 접했습니다.

문법도 간단하고 사용하기도 편해서 이것저것 만들어보던 중 고민이 생겼습니다.

바로 페이징 처리인데요. 현재 페이지를 css(부트스트랩의 active)를 통해서 구분해주고 싶은데,

mustache는 logic less template 이기 때문에 렌더링 되는 값을 비교하는 과정에 한계가 있다고 생각했습니다.

결국 생각한 방법은 서버에서 페이징 부분에 들어갈 html 코드를 작성하여 뷰 쪽으로 전달하는 방법인데요.

이런 방법으로 하니 서버 쪽 코드에 html 코드가 들어가 나중에 관리가 힘들 것 같다는 생각이 들더군요.

선배님들, 좋은 방법이 있다면 조언 부탁드리겠습니다.

-server

pageNumbers = new ArrayList<>();
for (int i = firstPage; i <= lastPage; i++) {
    if (i == currentPage) {
        pageNumbers.add("<li class='page-item active'><a class='page-link' href='/?page='" + String.valueOf(i) + ">" + String.valueOf(i) + "</a></li>");
    } else {
        pageNumbers.add("<li class='page-item'><a class='page-link' href='/?page=" + String.valueOf(i) + "'>" + String.valueOf(i) + "</a></li>");
    }
}

-view

{{#pageNumbers}}
    {{{.}}}
{{/pageNumbers}}

3개의 의견 from SLiPP

2017-10-17 17:13

html을 서버 측에서 처리하는 방법도 있지만 서버측에서 페이지 데이터만 가지도록 구현한 후 데이터를 mustache로 넘겨서 처리하는 것도 가능하겠죠.

다음 코드와 같이 생성한 후 mustache에 전달해서 처리하면 어떨까요?

import java.util.ArrayList;
import java.util.List;

public class Pages {
    private int firstPage;
    private int lastPage;
    private int currentPage;

    public Pages(int firstPage, int lastPage, int currentPage) {
        this.firstPage = firstPage;
        this.lastPage = lastPage;
        this.currentPage = currentPage;
    }
    
    public int getCurrentPage() {
        return currentPage;
    }
    
    public List<Integer> getPages() {
        List<Integer> pages = new ArrayList<>();
        for (int i = firstPage; i <= lastPage; i++) {
            pages.add(i);
        }
        return pages;
    }
}
2017-10-17 17:41

@자바지기 단순히 페이지 데이터를 보여주기만 한다면 말씀하신 것처럼 가능합니다만, 제가 원하는 것은 mustache가 페이지 데이터를 iterator 하는 과정에서 현재 페이지와 비교하여 css에 변화를 주고 싶었습니다.

JSP를 예로 들자면 아래와 같습니다. 비교하는 연산이 mustache에는 없는 것으로 보여, 처음 질문했던 것처럼 서버에서 html 코드를 작성하였고 mustache에서는 이스케이프 되지 않은 문자열을 출력하도록 해봤습니다.

<c:forEach begin="${Pages.firstPage}" end="${Pages.lastPage}" var="idx">
    <c:if test="${Pages.currentPage == idx}">
        <li class="page-item active">
            <a class="page-link" href="#">${idx}</a>
       	</li>
    </c:if>
    <c:if test="${Pages.currentPage != idx}">
        <li class="page-item">
            <a class="page-link" href="#">${idx}</a>
        </li>
    </c:if>
</c:forEach>
2017-10-17 17:57

그렇다면 mustache는 제약사항이 많아 mustache 문법을 따르면서 추가적인 기능을 제공하는 handlebars.java를 사용하는 것도 한 가지 방법입니다.

handlebars.java helpers을 보면 mustache 문법에 추가적으로 helper를 기본으로 제공하고 있고요. 나만의 custom helper를 추가하는 것도 가능합니다.

아무래도 mustache를 사용하면 힘든 점이 계속 발생할텐데요. handlers.java 사용을 고려해 보면 좋을 것 같네요.

의견 추가하기

연관태그

← 목록으로