Underscore templates.

by InviS

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/documentcloud/underscore/master/underscore-min.js"></script>
<table id='cmp' border='1'>
    <tr><th>User</th><th>Languages</th></tr>
</table>

<script id='langTmpl' type='x-jquery-tmpl'>
    <tr>
        <td>{{= firstname}} ${lastname}</td>
        <td>
          {{if languages}}
            {{each(i, value) languages}}
                ${i + 1}. ${value}<br />
            {{/each}}
          {{else}}
            Native only
          {{/if}}
        </td>
    </tr>
</script>

CSS

th{font-weight: bold; padding: 4px 10px; text-align: center;}
td{padding: 3px; font-style: italic;}

JavaScript

Users = [
    {
    firstname: 'Valeriy',
    lastname: 'Vasin',
    languages: ['Russian', 'Ukrainian', 'English']},
{
    firstname: 'Nastya',
    lastname: 'Guseva',
    languages: ['Russian', 'Ukrainian', 'English', 'German']},
{
    firstname: 'Alex',
    lastname: 'Levzhinsky'}
];

var tmpl = "<% _(users).each(function(user){ %>\
                <tr>\
                    <td><%= user.firstname + ' ' + user.lastname %></td>\
                    <td>\
                        <% if (user.languages){ %>\
                            <% _(user.languages).each(function(language, index){ %>\
                                <%= index+1 %>.<%= language %><br />\
                            <% }); %>\
                        <% } else { %>\
                            Native only\
                        <% } %>\
                    </td>\
                </tr>\
            <% }); %>";

var html = _.template(tmpl, {
    users: Users
});
$('#cmp').append(html);