Jquery Template not aligning

Question

I have a one html table .

<table id="blogPostContainer">
</table>

I was append some values in this table using signalR and tmpl .

$.connection.hub.start().done(function () {
                booking.server.getAllDates().done(function (data) {
                    debugger;
                    for (var i = 0; i < data.length; i++) {
                        DateTempl = DateTempl.concat(data[i].Dates);
                    }
                    var blogPosts = { Date: [DateTempl] }
                    $("#blogPostTemplate").tmpl(blogPosts).appendTo("#blogPostContainer");

                });
            });

And I am align table tr td formatting using by jquery taemplate

<script id="blogPostTemplate" type="text/x-jQuery-tmpl"> 

        <tr>
            <td>
            Date
            </td>
             {{each Date}} <td> ${$value} </td> {{/each}}
        </tr>


    </script>

The first tr and td tag are working . But inside of the each loop td tag not working

Please see my result below

First Td working but second td not working . I want my each date's want to inside of td tag. any one help me

Answer 1

Altough you haven't posted your DateTempl declaration but it seems it's an array. And with the [DateTempl] call you wrap it into another array in the following statement

var blogPosts = { Date: [DateTempl] };

So in the query template the ${$value} will display your whole array in one table cell.

You just need to remove the [] and it should work fine:

var blogPosts = { Date: DateTempl };