<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style type="text/css">
._true {
background: red;
}
._false {
background: blue;
}
</style>
<script src="./lib/jquery/1.9.1/jquery.min.js"></script>
<script src="./lib/handlebars/4.0.10/handlebars.js"></script>
</head>
<body>
<ul id="testData">
</ul>
<script id="template" type="text/x-handlebars-template">
{{#each members}}
{{#fn_isIf}}
<li class="_true">
{{@index}} :
{{name}}
{{age}}
</li>
{{else}}
<li class="_false">
{{@index}} :
{{name}}
{{age}}
</li>
{{/fn_isIf}}
{{/each}}
</script>
<script type="text/javascript">
Handlebars.registerHelper("fn_isIf", function(option) {
if (this.age == 20) {
return option.fn(this);
} else {
return option.inverse(this); // 반대
}
});
var testData = {
members : [
{ name : '이소룡', regdate: 1496893345000, age:50},
{ name : '김양용', regdate: 1496893341000, age:20},
{ name : '김오잉', regdate: 1496893330000, age:30},
{ name : '김조조', regdate: 1496893310000, age:20},
{ name : '김나라', regdate: 1496893380000, age:60}
]
}
var template = Handlebars.compile($('#template').html());
var html = template(testData);
$("#testData").append(html);
</script>
</body>
</html>
