emberjs instead of rendering component this was rendered <!----> - ember.js

Question

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 {{bind-attr id=id}}>
<td>
<input type="text" name="task" {{bind-attr value=name}} >
</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>
{{#each model as |task|}}
{{single-task id=task.id name=task.name completed=task.completed}}
{{/each}}
</script>
<script type="text/x-handlebars" id="index">
<table>
{{tasks-collection}}
</table>
</script>

Answer 1

Your coding looks like you are not using ember-cli. please use it. In this link you can go through enormous projects which are using ember, you can learn from them how are they using it. You can even play with ember-twiddle for easy learning. I will encourage you to follow ember guides tutorial.
Regarding your question,
You need to pass the required data to components,
{{tasks-collection model=model}}
In single-task component, you can avoid bind-attr instead you can use it like
<tr id={{id}}>
Refer deprecation guide bind-attr for more details