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>