Javascript 在下划线模板中动态设置图像

我目前正在使用下划线模板来呈现显示联系人列表的HTML列表

该模板如下所示：

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

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

化身实际上不是一个URL，而是一个指向需要抓取的远程数据库的链接。比如：

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
 });
}

问题是，是否有一种方法可以编写我的模板，从而代替直接读取联系人对象的化身值，我可以嵌入对诸如getAvatar之类的函数的引用，该函数在呈现模板时，获取图像的url并设置化身图像url

提前感谢您演示如何调用JavaScript函数并异步更新缩略图的

src

属性。我尝试使用

setTimeout

模拟您的DB调用，并使用关联数组模拟DB调用

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函数并异步更新缩略图的

src

属性。我尝试使用

setTimeout

模拟您的DB调用，并使用关联数组模拟DB调用

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>

---

大家好，这里有一个我认为应该做的尝试：我仍然没有弄清楚一旦我有了URL，如何获得元素并设置它的src属性。不幸的是，当模板形成时，它对DOM一无所知：oHi，下面是一个尝试，我认为应该怎么做：我仍然没有弄清楚一旦我有了URL，如何获得元素并设置它的src属性。不幸的是，当模板形成时，它对DOM:o一无所知