Question

我目前正在使用下划线模板来呈现显示联系人列表的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？

提前致谢

Answer 1

Here's an example演示如何调用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]);
}

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

1 个答案: