emberjs ArrayController doesn't work in template - ember.js

Question

I am trying out ember.js and I am struggling with rendering an array of items to the template:
index.html
<script type="text/x-handlebars">
{{App.test}}
</script>
<script type="text/x-handlebars">
{{#each App.eventsController}}
<p>{{title}}</p>
{{/each}}
</script>
<!-- le javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
<script src="js/app.js"></script>
</body>
app.js
var App = Em.Application.create({
test : 'does it work?...'
});
App.Event = Ember.Object.extend({
title: '',
body: ''
});
App.eventsController = Ember.ArrayController.create({
events: [],
init: function() {
self = this;
self.pushObject(App.Event.create({
title: "Event 1",
body: "Content"
}));
}
});
The first binding (App.test) does work fine. Only my second call does nothing but putting an empty handlebar-script-tag into my DOM.
So what am I missing here?

Answer 1

If you override init you need to make sure to call this._super so the controller can finish its setup process. Once you do this your code should be working as expected.
init: function() {
this._super();
this.get('content').pushObject(App.Event.create({
title: "Event 1",
body: "Content"
}));
}
I've created a jsfiddle for you so you can see it working: http://jsfiddle.net/qKXJt/188/

Answer 2

You'd want to put your eventsController's data inside the 'content' property:
App.eventsController = Ember.ArrayController.create({
content: [],
init: function() {
this.get('content').pushObject(App.Event.create({
title: "Event 1",
body: "Content"
}));
}
});
Your template {{#each App.eventsController}} should automatically pick up the changes and display your title.