Displaying HTML from ArrayController - model-view-controller

Question

I am attempting to display some information from my controller into my view, but the information is not being displayed.
I have a fiddle to demonstrate my code so far:
Fiddle
If I check in the console for MovieTracker.movieController.content, the 2 objects do show up. However, the HTML is not showing up correctly. What could be the problem?
Here is my View:
<script type="text/x-handlebars">
{{#each MovieTracker.movieController}}
<h2>{{title}}</h2>
<h3>{{rating}}</h3>
{{/each}}
​
And my Ember Application + Controller:
// Create our Application
MovieTracker = Ember.Application.create();
// Inherit outlet Support
MovieTracker.ApplicationController = Ember.Controller.extend();
// ArrayController to create some new Movies
MovieTracker.movieController = Ember.ArrayController.create({
content: [],
init: function(){
var kidsMovie = MovieTracker.Movie.create({
title: 'Toy Story',
rating: 4
});
this.pushObject(kidsMovie);
var avengers = MovieTracker.Movie.create({
title: 'The Avengers',
rating: 5
});
this.pushObject(avengers);
}
});
// Start our Ember Application
MovieTracker.initialize();​

Answer 1

I've updated your fiddle (see here: http://jsfiddle.net/schawaska/hKPQy/24/) to have a "movies" view binding to your controller instance, and also added a content property binding to the controller content. Also added the references to latest version of ember and handlebars.
Now you have a couple of templates:
<script type="text/x-handlebars" data-template-name="application">
<h1>Movie Tracker</h1>
{{view MovieTracker.MovieTrackerView }}
</script>
<script type="text/x-handlebars" data-template-name="movie-tracker">
Movies:<br />
{{#each movie in content}}
<h2>{{movie.title}}</h2>
<h3>{{movie.rating}}</h3>
{{/each}}
</script>
Now your each helper will iterate through a collection assigning each value to movie, which is your model (that was missing too, so I've created one) and its properties.
Your controller and view look like this:
MovieTracker.moviesController = Ember.ArrayController.create({
content: [],
init: function(){
// you missed the call to _super()
this._super();
var list = [
MovieTracker.MovieModel.create({
title: 'Toy Story',
rating: 4
}),
MovieTracker.MovieModel.create({
title: 'The Avengers',
rating: 5
})];
// also, it's a good idea to use .set whenever you can
this.set('content', list);
}
});
MovieTracker.MovieTrackerView = Em.View.extend({
templateName: 'movie-tracker',
controllerBinding: 'MovieTracker.moviesController',
contentBinding: 'controller.content'
});