hoganjs if foreach

How to use hoganjs wih if statement and foreach statement

by rukurx

HTML

<script src="http://twitter.github.io/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
<script src="https://twitter.github.io/hogan.js/builds/3.0.1/hogan-3.0.1.js"></script>
<div id="user_list">
    <!-- insert user here -->
</div>
<script type="text/template" id="tpl_user">
{{!
    This is a tempale for users
    @param array users
}}
    {{#users}}
    <ul class="user-ul">
        {{#is_active}}
            <li>{{id}}</li>
            <li>{{name}}</li>
            <li>{{age}}</li>
        {{/is_active}}     
        {{^is_active}}
            <li>{{id}}</li>
            <li>-</li>
            <li>-</li>
            <li>-</li>
        {{/is_active}}
    </ul>
    {{/users}}
</script>

CSS

.user-ul {
    display: table;
    table-layout: fixed;
    text-align: center;
    width: 50%;
}

.user-ul li {
    display: table-cell;
    vertical-align: middle;
}

JavaScript

var users = [
        {'id':1, 'name': 'Alex', 'age':20, 'gender': 'male', 'is_active': true},
        {'id':2, 'name': 'Ben', 'age':25, 'gender': 'male', 'is_active': false},
        {'id':3, 'name': 'Cony', 'age':30, 'gender': 'female', 'is_active': true}
    ];

var tpl = Hogan.compile($('#tpl_user').text());
var html = tpl.render({
               users: users
           });
$('#user_list').append(html);