Définition dynamique de l'image dans le modèle de soulignement

Question

J'utilise actuellement des modèles de soulignement pour afficher une liste HTML qui affiche une liste de contacts.

Le modèle ressemble à ceci:

<li> 
<span class="name">Name: <=%data.name%></span> 
<span class="email">Name: <=%data.email%></span> 
<img class="avatar" src="<=%data.avatar%>"></img> 
</li> 

La question est, quand je mis les données de modèle, la source de l'image ne sera pas connue. Pourquoi? Parce que mes données ressemble à ceci:

contact = { 
    name: string, // i.e. 'John Doe' 
    email: string, // i.e 'john@doe.com' 
    avatar: string // i.e. '11a93150-14d4-11e3' 
} 

L'avatar est en fait pas une URL, plutôt un lien vers une base de données distante qui a besoin d'aller chercher. Quelque chose comme:

function getAvatar(uuid, cb) { // uuid is something like 11a93150-14d4-11e3 
window.db.getImageUrl(function(url) { 
    cb(url); // url is something like http://foo.com/avatar.png 
}); 
} 

La question est, est-il possible d'écrire mon modèle afin qu'au lieu de lire la valeur avatar de l'objet contact directement, je peux intégrer une référence à une fonction comme getAvatar que lorsque le modèle est rendu, récupère l'URL sur l'image et définit l'URL de l'image de l'avatar

Merci à l'avance

Answer 1

Here's an example pour montrer comment vous pouvez appeler des fonctions JavaScript et asynchornously mettre à jour src attribut de vignettes. J'ai essayé de simuler votre appel de base de données en utilisant setTimeout et la base de données utilisant un tableau associatif.

HTML:

<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: 'john@doe.com', avatar: '11a93150-14d4-11e3'}, 
    {name: 'Hannah Smith', email: 'hannah@smith.com', avatar: '11a93150-14d4-1231' } 
], 

simulatedDB = []; 
simulatedDB['11a93150-14d4-11e3'] = "path to avatar 1"; 
simulatedDB['11a93150-14d4-1231'] = "path to avatar 2"; 

$(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]); 
}