0

下划线模板看起来很简单，但我正在尝试我的第一次尝试并且很难过。

我只是想在 H1 中显示一个人的名字。

这是我的模板：

<script id="tmpl-index-list" type="text/template">
<% _.each(data, function(item){  %>
    <li>
        <a href="#person" data-transition="slide">
            <h1><%=item.personName%></h1>
        </a>    
    </li>
<% }); %>

这是我的 JS：

var tmplMarkup = $('#tmpl-index-list').html();
var compiledTmpl = _.template( tmplMarkup, {data: IndexList.listEntries} );
$('#index-list-wrapper').html(compiledTmpl);

IndexList.listEntires 是 ListEntry 对象的数组，简单的键/值对象。

例如，这里是“类”：

function ListEntry(){
    this.img_url = '';
    this.personName = '';
    this.personID = '';
};

当我对其执行 console.dir 时，数据就在那里，但对于模板中的 item.personName，它显示为未定义。

我错过了什么？

提前致谢。

4

1 回答 1

0

我相信问题出在您传入的数据上。您正在使用IndexList.listEntries，但您没有提供任何示例数据。

根据您的评论，这listEntries是一个对象数组，例如ListEntry，我汇总了一些示例数据。

var IndexList = {
    listEntries : [
        {
            "img_url" : "http://www.gravatar.com/avatar/72b3fbc4d71d3955deca44483322da23?s=32&d=identicon&r=PG",
            "personName" : "Tim",
            "personId" : "Tim76"
        },
        {
            "img_url" : "http://www.gravatar.com/avatar/0927a92a180a7552e2119742ede9b9cf?s=128&d=identicon&r=PG",
            "personName" : "Rob",
            "personId" : "Robert Price"
        }
    ]
};

使用此数据，您的模板在运行时正确地将“Tim”和“Rob”显示为列表项。

我建议你再去看看IndexList你试图使用的数据，问题几乎肯定存在。

于 2012-12-20T18:25:52.917 回答