[백업][가리사니] mustache 문법 + 스프링 연동
html, spring
이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
머스터치
공식 : https://mustache.github.io/ 데모 : https://mustache.github.io/#demo
- 을 통해 빠른 치환 장점
- 웬만한 플랫폼을 모두 지원한다.
- 속도가 빠르다. 단점
- 플랫폼 공용으로 만들어졌기에 스프링 같은 곳에서 쓰기위해서는 모두 모델안에 넣어줘야한다.
- 상위를 선택하는 방법이 한정적임.
문법
예제 데이터
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}
출력
IF
- NOT (^)을 제외하면 루프와 동일
- (^) 제외시 IF 개념이 아니라 반복 이지만 이해를 돕기위한 설명입니다. ``` java
해더가 존재함
``` java
해더가 존재하지 않음
해더333 이 존재하지 않음
내부출력 - 자기자신
해드의 값은 임
루프 : 사실상 위 IF 가 루프를 통하고있다.
-
즉 배열형이면 루프를 돌며 출력되며, 배열이 아닌 값이면 단일 출력이되며, 값이 없으면 출력되지않음. ``` java
page> 이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
머스터치
공식 : https://mustache.github.io/ 데모 : https://mustache.github.io/#demo
- {{ }} 을 통해 빠른 치환 장점
- 웬만한 플랫폼을 모두 지원한다.
- 속도가 빠르다. 단점
- 플랫폼 공용으로 만들어졌기에 스프링 같은 곳에서 쓰기위해서는 모두 모델안에 넣어줘야한다.
- 상위를 선택하는 방법이 한정적임.
문법
예제 데이터
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}
출력
{{ header }}
IF
- NOT (^)을 제외하면 루프와 동일
- (^) 제외시 IF 개념이 아니라 반복 이지만 이해를 돕기위한 설명입니다.
{{# header }} 해더가 존재함 {{/ header }}{{^ header }} 해더가 존재하지 않음 {{/ header }}{{^ header333 }} 해더333 이 존재하지 않음 {{/ header333 }}내부출력 - 자기자신
{{# header }} 해드의 값은 {{.}} 임 {{/ header }}루프 : 사실상 위 IF 가 루프를 통하고있다.
- 즉 배열형이면 루프를 돌며 출력되며, 배열이 아닌 값이면 단일 출력이되며, 값이 없으면 출력되지않음.
{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}}주석
{{! 이렇게하면 주석이 됩니다. }}상위선택
- 상위를 선택하는 문법이 한정적임
- 이렇게 사용할 경우 items 안에 해더가 없을때 한단계 위 해더가 선택된다.
- 단계별로 올라가도 끝내 해더가 나오지 않을 경우 빈값
{{#items}} {{header }} {{/items}}포함 : include
- 해당 경로에 있는 템플릿을 결합합니다.
{{>경로}}
스프링에서 적용하기
메이븐 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mustache</artifactId>
</dependency>
src/main/resources/templates/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{ title }}</title>
</head>
<body>
<div>
{{ msg }}
</div>
</body>
</html>
컨트롤러
@RequestMapping("/")
public String root(Model model)
{
model.setAttribute("title", "타이틀 테스트");
model.setAttribute("msg", "Hello!!");
return "test";
}
연동이 안되는 경우는 아래와 같이 리졸버를 등록해보세요.
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
MustacheViewResolver resolver = new MustacheViewResolver();
resolver.setCharset("UTF-8");
resolver.setContentType("text/html;charset=UTF-8");
resolver.setPrefix("classpath:/templates/");
resolver.setSuffix(".html");
registry.viewResolver(resolver);
}
}
<li><strong></strong></li> page> 이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
머스터치
공식 : https://mustache.github.io/ 데모 : https://mustache.github.io/#demo
- {{ }} 을 통해 빠른 치환 장점
- 웬만한 플랫폼을 모두 지원한다.
- 속도가 빠르다. 단점
- 플랫폼 공용으로 만들어졌기에 스프링 같은 곳에서 쓰기위해서는 모두 모델안에 넣어줘야한다.
- 상위를 선택하는 방법이 한정적임.
문법
예제 데이터
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}
출력
{{ header }}
IF
- NOT (^)을 제외하면 루프와 동일
- (^) 제외시 IF 개념이 아니라 반복 이지만 이해를 돕기위한 설명입니다.
{{# header }} 해더가 존재함 {{/ header }}{{^ header }} 해더가 존재하지 않음 {{/ header }}{{^ header333 }} 해더333 이 존재하지 않음 {{/ header333 }}내부출력 - 자기자신
{{# header }} 해드의 값은 {{.}} 임 {{/ header }}루프 : 사실상 위 IF 가 루프를 통하고있다.
- 즉 배열형이면 루프를 돌며 출력되며, 배열이 아닌 값이면 단일 출력이되며, 값이 없으면 출력되지않음.
{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}} {{/items}}주석
{{! 이렇게하면 주석이 됩니다. }}상위선택
- 상위를 선택하는 문법이 한정적임
- 이렇게 사용할 경우 items 안에 해더가 없을때 한단계 위 해더가 선택된다.
- 단계별로 올라가도 끝내 해더가 나오지 않을 경우 빈값
{{#items}} {{header }} {{/items}}포함 : include
- 해당 경로에 있는 템플릿을 결합합니다.
{{>경로}}
스프링에서 적용하기
메이븐 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mustache</artifactId>
</dependency>
src/main/resources/templates/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{ title }}</title>
</head>
<body>
<div>
{{ msg }}
</div>
</body>
</html>
컨트롤러
@RequestMapping("/")
public String root(Model model)
{
model.setAttribute("title", "타이틀 테스트");
model.setAttribute("msg", "Hello!!");
return "test";
}
연동이 안되는 경우는 아래와 같이 리졸버를 등록해보세요.
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
MustacheViewResolver resolver = new MustacheViewResolver();
resolver.setCharset("UTF-8");
resolver.setContentType("text/html;charset=UTF-8");
resolver.setPrefix("classpath:/templates/");
resolver.setSuffix(".html");
registry.viewResolver(resolver);
}
}
<li><a href=""></a></li>
주석
``` java
상위선택
- 상위를 선택하는 문법이 한정적임
- 이렇게 사용할 경우 items 안에 해더가 없을때 한단계 위 해더가 선택된다.
- 단계별로 올라가도 끝내 해더가 나오지 않을 경우 빈값 ``` java
포함 : include
- 해당 경로에 있는 템플릿을 결합합니다.
``` java
스프링에서 적용하기
메이븐 추가
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mustache</artifactId>
</dependency>
src/main/resources/templates/test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div>
</div>
</body>
</html>
컨트롤러
@RequestMapping("/")
public String root(Model model)
{
model.setAttribute("title", "타이틀 테스트");
model.setAttribute("msg", "Hello!!");
return "test";
}
연동이 안되는 경우는 아래와 같이 리졸버를 등록해보세요.
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
@Override
public void configureViewResolvers(ViewResolverRegistry registry) {
MustacheViewResolver resolver = new MustacheViewResolver();
resolver.setCharset("UTF-8");
resolver.setContentType("text/html;charset=UTF-8");
resolver.setPrefix("classpath:/templates/");
resolver.setSuffix(".html");
registry.viewResolver(resolver);
}
}