Iterate & print values in ember.js - ember.js

Question

I just have started ember.js. My markup code is
<script type="text/x-handlebars" data-template-name="home">
<h1>Names: </h1>
{{#each home in App.HomeController.content}}
<h1>Name: </h1>
{{home.name}}<br />
{{/each}}
</script>
and my javascript code is
App = Ember.Application.create();
App.Router.map(function() {
this.route("home", {
path: "/"
});
});
/*
* HomeController
*/
App.HomeController = Ember.ArrayController.extend({
content: [],
templateName: 'home',
init: function(){
var self = this;
$.ajax({
url: 'response.php',
dataType: 'JSON',
type: 'POST',
success: function(res){
self.set('content', res);
},
error: function(){
}
});
}
})
But it seems that i can not print name. I cannot iterate & print the name. Can any body help me.
Thanks

Answer 1

You only need to provide controller, never a full path (App.HomeController.content):
{{#each home in controller}}
<h1>Name: </h1>
{{home.name}}<br />
{{/each}}
The reasons for this:
When you write Ember.ArrayController.extend(), you create a class, not an instance. Ember will automatically create the instances for you.
The controller variable in a given template points to the controller of the same name as the template. In your case:
Template name: home
Controller: instance of App.HomeController
Also, there is no need to point to an ArrayController's content, as it's only a proxy , hence it is the default context for iterations.