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連想配列を使用して 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:

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 に答える