Live Demo

You can see the complied HTML in Result panel real time by editing the codes in Data and Template panel.

{
    code : 1,
    data: [{
        id : 1,
        name : "Sky",
        gender : "male"
    }, {
        id : 2,
        name : "Kathy",
        gender : "female"
    }]
}
<h2>Name List</h2>
<article>
    @if(code === 1) {
        <ul>
            @{
                data.forEach(function(person) {
                    <li class="@(person.gender === 'female' ? 'pink' : '')">
                        <a href="/details/@person.id">@person.name</a>
                    </li>
                });
            }
        </ul>
    } else {
        <p>Sorry, no data!</p>
    }
</article>