CanJS EJS table - rows appearing above the table

Question

I am new to CanJS and was trying to learn via tutorials.. Once place where I got stuck was when I converted the todo tutorial code to use table instead of UL/LI combination.

May be I am making some very small mistake.. but could not find out the same for last 3 days.. Can someone help out?

The jsFiddle for the short version of todo tutorial (which now uses tables) is here where you can see the problems.

The crux of the code from ejs is here..

<script type='text/ejs' id='todosEjs'>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>status</th>
    </tr>
    </thead>
    <tbody>
<!-- bind to changes in the todo list -->
<% this.each(function( todo ) { %> 
    <!-- add the todo to the element's data -->
    <tr <%= (el) -> el.data('todo',todo) %>>
        <td>
            <input type="checkbox" <%= todo.attr('complete') ? 'checked' : '' %>>
        </td>
        <td><%= todo.attr('name') %></td>
        <td><%= todo.attr('id') %></td>
    </tr>
<% }) %>
 </tbody>
</table>

</script> 

Looking forward towards helping hands :-)

Answer 1

UPDATE: This was the result of a bug which is now fixed

It looks as if the comments are the problem here. Removing them makes it work, see the updated Fiddle:

<table border="1">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>status</th>
    </tr>
<% this.each(function( todo ) { %> 
    <tr <%= (el) -> el.data('todo',todo) %>>
        <td>
            <input type="checkbox" <%= todo.attr('complete') ? 'checked' : '' %>>
        </td>
        <td><%= todo.attr('name') %></td>
        <td><%= todo.attr('id') %></td>
    </tr>
<% }) %>