Dev/javascript
[jsrender] else if 문 처리 방법
bskyvision.com
2023. 4. 23. 12:31
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>
위 웹문서를 브라우저에서 열어보면 다음과 같이 렌더링됩니다.
