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

【问题标题】：Dynamically setting image in underscore template在下划线模板中动态设置图像
【发布时间】：2013-09-03 20:19:00
【问题描述】：

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

提前致谢

【问题讨论】：

嗨，这是我认为可行的方法：jsfiddle.net/8EKmC 我还没有弄清楚，一旦我有了 URL，如何获取元素并将其设置为 src属性。不幸的是，当模板形成时，它对 DOM 一无所知：o

标签： javascript ajax image templates underscore.js

【解决方案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]);
}

【讨论】：