emberjs instead of rendering component this was rendered

i am new to emberjs and i am trying to iterate through arr and render a table with the content of elements of the array the each loop renders <!----> instead of rows in the table what am i doing wrong? here is my code: app.js

arr=[{id:1,name:foo,completed:'yes'},{id:2,name:'bar', completed:'no'}]
App= Ember.Application.create();
App.Router.map(function(){
})

App.IndexRoute=Ember.Route.extend({
    model: function(){
        return arr;
    }
})
App.SingleTaskComponent = Ember.Component.extend({
    templateName: "components/single-task",
    tagName: ""
});

App.TasksCollectionComponent = Ember.Component.extend({
    templateName: "components/tasks-collection",
    tagName: "tbody",
        actions: {
            newTask: function(){
                console.log("here");
            }
        }
 });

and here is the hbs code:

<script type="text/x-handlebars" id="components/single-task">
    <tr >
        <td>
            <input type="text" name="task"  >
        </td>
        <td>
            <input type="checkbox" name="completed">
        </td>
    </tr>
</script>
<script type="text/x-handlebars" id="components/tasks-collection">
    <tr>
        <td><button>+</button></td>
        <td>Tasks</td>
    </tr>
    
        
    
</script>
<script type="text/x-handlebars"  id="index">
    <table>
        
    </table>
</script>