Question

Underscore templates seem pretty simple, but I’m working on my first attempt and am stumped.

I’m just trying to display a person’s name in the H1.

Here’s my template:

<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>
<% }); %>                  

And here’s my JS:

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

IndexList.listEntires is an array of ListEntry objects, simple key / value objects.

For example, here is the ‘class’:

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

When I do a console.dir on it, the data is there, but for item.personName in the template, it comes up as undefined.

What am I missing?

Thanks in advance.

Answer 1

I believe the problem is with the data you are passing in. You are using IndexList.listEntries, but you have not provided any example data.

Based on your comments, that listEntries is an array of objects like ListEntry, I have put together some sample data.

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"
        }
    ]
};

Using this data, your template correctly shows both “Tim” and “Rob” as list items when run.

I suggest you go and look again at the IndexList data you are trying to use, the problem is almost certainly there.