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'
});