Question

下划线模板看起来很简单，但我正在努力进行第一次尝试而且难倒。

我只想在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对象数组，简单的键/值对象。

例如，这是'class'：

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

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

我错过了什么？

提前致谢。

Answer 1

我认为问题在于您传入的数据。您使用的是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数据，问题几乎肯定存在。

下划线模板变量 - 刚刚开始

1 个答案: