jsrender에서는 else if 문법은 그냥 else에 조건을 붙여주는 것입니다. 일반 자바스크립트 문법을 아시는 분들은 처음에 else if를 시도해보고서는 왜 안되지 하셨을 것입니다.
{{if 조건식}}
{{else 조건식}}
{{else 조건식}}
{{else 조건식}}
{{/if}}
관련된 예시 코드를 보여드리겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://www.jsviews.com/download/jsviews.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script id="theTmpl" type="text/x-jsrender">
{{for people}}
{{if age < 20}}
<div>{{:name}}은 20세 미만입니다.</div>
{{else age == 20}}
<div>{{:name}}은 20세입니다.</div>
{{else}}
<div>{{:name}}은 20세 초과입니다.</div>
{{/if}}
{{/for}}
</script>
<script>
var data = {
people: [
{name: '심교훈', age: 18}, // index 0
{name: '문태호', age: 19}, // index 1
{name: '황병일', age: 20}, // index 2
{name: '정하연', age: 21}, // index 3
{name: '이정기', age: 22}, // index 4
]
};
var template = $.templates("#theTmpl");
var htmlOutput = template.render(data);
$("#result").html(htmlOutput);
</script>
</body>
</html>
위 웹문서를 브라우저에서 열어보면 다음과 같이 렌더링됩니다.
'Dev > javascript' 카테고리의 다른 글
| [javascript] ESLint가 뭐지? (0) | 2023.10.29 |
|---|---|
| [plotly.js] 차트, 플롯의 배경색 설정하는 방법 (0) | 2023.05.23 |
| [javascript] 변수 선언 키워드 var, let, const 차이 정리 (0) | 2023.05.01 |
| [javascript] 배열의 원소 중 하나 랜덤 선택하기 (0) | 2023.04.27 |
| [jsrender] for문 슬라이싱 범위 지정하는 방법 (0) | 2023.04.21 |
| [jQuery] 클릭된 html 요소의 텍스트를 추출하는 방법 (0) | 2023.04.12 |
| [VUE] bootstrap 설치하기 (npm으로 설치) (0) | 2022.09.03 |
| [javascript] 문자열이 특정 문자열로 시작하는지 확인하기, 문자열.startsWith() (0) | 2022.08.30 |