Currently, I am utilizing underscore templates to showcase a HTML list demonstrating a series of contact details.
The format of the template is as follows:
<li>
<span class="name">Name: <=%data.name%></span>
<span class="email">Email: <=%data.email%></span>
<img class="avatar" src="<=%data.avatar%>"></img>
</li>
An issue arises when setting the data for the template - the image source remains undetermined. This uncertainty stems from the structure of my data:
contact = {
name: string, // e.g. 'John Doe'
email: string, // e.g. '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcb6b3b4b29cb8b3b9f2bfb3b1">[email protected]</a>'
avatar: string // e.g. '11a93150-14d4-11e3'
}
In this scenario, the avatar field does not contain a direct URL but instead a reference to a remote database that necessitates fetching, similar to:
function getAvatar(uuid, cb) { // uuid like 11a93150-14d4-11e3
window.db.getImageUrl(function(url) {
cb(url); // url such as http://foo.com/avatar.png
});
}
The question at hand revolves around whether there exists a method to modify my template so that rather than directly accessing the avatar value within the contact object, I can integrate a call to a function like getAvatar. Consequently, upon rendering the template, the function retrieves the image URL and assigns it to the avatar image element?
Your input is appreciated in advance.