Handlebars - How to render all values inside array to the template model?

Question

I'm trying to render every array value inside model object. I can manage to render first value of the array but can't render rest of them. I've tried work it inside each function but doesn't work. I need to view all the array values in each row. Please inspect the examples and you will see quickly:

Here is working sample which renders only first value of the array: http://jsfiddle.net/N2b5M/1123/

When i try to render all the dates inside tags array with each, i won't work: http://jsfiddle.net/N2b5M/1136/

template:

{{#users}} 
    <tr> 
        <td>{{fullName person}}</td> 
        <td>{{jobTitle}}</td> 
        <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
        <td>{{currentDate}}</td>
    </tr> 
{{/users}} 

data:

var data = { 
    users: [ { 
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "P",
                    "date": "10.9.2014"
                },
                {
                    "type": "C",
                    "date": "18.12.2014"
                },
                {
                    "type": "T",
                    "date": "2.10.2014"
                }
            ]
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa" 
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "T",
                    "date": "2.11.2014"
                }
            ]
        }, 
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry", 
            lastName: "Finch",
            tags: [
                {
                    "type": "T",
                    "date": "11.12.2014"
                }
            ]
        }, 
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
}; 

javascript:

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

Handlebars.registerHelper('currentDate', function(context) {
    var currentTag = this.person.tags[0];
    var currentDate = currentTag.date;
    return currentDate;
});

$('body').append(template(data));

I'm trying to render all the dates inside tags array and tried like this:

{{#each person.tags}}
      <td>{{currentDate}}</td>
{{/each}} 

Handlebars.registerHelper('each', function(context, options) {
    var tagsTotal = context.person.tags.length;
    var ret = '';
    console.log(tagsTotal);
    for( i = 0; i < tagsTotal; i++) {
        var tagType = context.type;

        ret += options.fn(context[i]);
    }
    return ret;
});

Answer 1

I am not sure if this is ugly or if there is a better way of doing this. but this works:

<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template"> <table>
    <thead> 
        <th>Name</th> 
        <th>Job Title</th> 
        <th>Twitter</th> 
        <th>Dates</th>         
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{fullName person}}</td> 
            <td>{{jobTitle}}</td> 
            <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>

            {{#person}}
                {{#tags}}
                    <td>
                        {{date}}
                    </td>

                {{/tags}}

            {{/person}}
        </tr> 
        {{/users}} 
    </tbody> 
</table> 
</script>