hoganjs

How to use Hogan.js

by rukurx

HTML

<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">
    <ul class="user-ul">
        <li>{{id}}</li>
        <li>{{name}}</li>
        <li>{{age}}</li>
        <li>{{gender}}</li>
        <li>{{phone}}</li>
    </ul>
</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 tpl = Hogan.compile($('#tpl_user').text());
var html = tpl.render({
    id: 1,
    name: 'Jack',
    age: 20,
    gender: 'male',
    phone: '09012345678'
});
$('#user_list').append(html);