1

我目前正在使用下划线模板来呈现一个显示联系人列表的 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 并设置头像图片网址？

提前致谢

4

1 回答 1

1

这是一个示例来演示如何调用 JavaScript 函数并异步更新src缩略图的属性。我尝试setTimeout使用关联数组来模拟您的数据库调用和数据库。

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]);
}
于 2014-01-07T08:15:27.600 回答