jQuery template ${} tag

http://api.jquery.com/template-tag-equal/

by dcardoso

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script id="studentTemplate" type="text/x-jquery-tmpl"> 
<tr>
    <td>${Name}</td>
    <td>${$item.getAge()}</td>
</tr>
</script>

<table>
    <tbody>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </tbody>
    <tbody id="studentList">
    </tbody>
</table>

CSS

table { border-collapse:collapse; width:400px; background-color:#f8f8f8; margin:10px; } table td { border:1px solid blue; padding:3px; } 
    table th { font-weight:bold; border:2px solid blue; padding:1px; } table tbody { border:2px solid blue; }

JavaScript

var students = [
    {"Name":"Joao", "BirthDate":"1985"},
    {"Name":"Maria", "BirthDate":"1980"},
];

/* Render the template with the students data */
$("#studentTemplate").tmpl(students, { 
    getAge: function() {
        var date = new Date();
        return date.getFullYear() - this.data.BirthDate.substring(0,4);
    }
}).appendTo("#studentList");