JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script type='text/html' id='contactTemplate'>
    <li id="contact-<%= avatar %>"> 
     <span class = "name"> Name: <%= name %> </span>
     <span class="email">Name: <%= email %></span> 
     <img class = "avatar" data-populate-path="<% getPath( avatar ) %>" />
    </li>
</script>
<ul id='contactList'></ul>

JavaScript

var contacts = [{
    name: 'John Doe',
    email: '[email protected]',
    avatar: '11a93150-14d4-11e3'
}, {
    name: 'Hannah Smith',
    email: '[email protected]',
    avatar: '11a93150-14d4-1231'
}],
    simulatedDB = [];
simulatedDB['11a93150-14d4-11e3'] = "http://www.bolegaindia.com/images/gossips/gossip_thumb/avatar2_thumb_1333782977.jpg";
simulatedDB['11a93150-14d4-1231'] = "http://punbb.informer.com/forums/img/avatars/65358.jpg";

$(document).ready(function () {
    var compiled = _.template($("#contactTemplate ").html());

    _.each(contacts, function (d, i) {
        $("#contactList").append(compiled(d));
    });
});
function getPath(target) {
    setTimeout(updateAvatar, 1000, target);
}
function updateAvatar(target) {
    $("#contact-"+target+" img").attr("src", simulatedDB[target]);
}