Unable to get the handlebar data into template - ember.js

Question

I am learning ember.js through the official documentation and am having the following html page that contains mustache template:
<section id="main">
<ul id="todo-list">
{{#each controller}}
<li {{bindAttr class="isCompleted:completed"}}>
<input type="checkbox" class="toggle">
<label>{{title}}</label><button class="destroy"></button>
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
However, the problem is that the browser displays the data as:
{{#each controller}}
{{title}}
{{/each}}
without rendering the seed data supplied into the template.
I am having the following javascript declarations just before the end of body tag:
<script src="js/libs/jquery.js"></script>
<script src="js/libs/handlebars.js"></script>
<script src="js/libs/ember.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/application.js"></script>
<script src="js/libs/router.js"></script>
<script src="js/models/store.js"></script>
<script src="js/models/todo.js"></script>
The page loads without any error reported by firebug. Please let me know what I am missing.

Answer 1

I guess you are missing something fundamental - the handlebars script tag around your 'template', the data-template-name should be named depending on the route your are in, I've used here application only for the sake of the example. On the official guides you mentioned if you enable the html panel in embedded jsbin you will see what I mean, right under the body tag is the wrapping script tag named todos.
<script type="text/x-handlebars" data-template-name="application">
<section id="main">
<ul id="todo-list">
{{#each controller}}
<li {{bindAttr class="isCompleted:completed"}}>
<input type="checkbox" class="toggle">
<label>{{title}}</label><button class="destroy"></button>
</li>
{{/each}}
</ul>
<input type="checkbox" id="toggle-all">
</section>
</script>
Hope it helps.