title: Basic Ember.js routing and data load
body: <p>In the constantly changing world of Ember.js, I'm looking for some help on getting a simple application up and running.</p>
  
  <p>I'm trying to get some basic framework down for loading data via JSON through an API with Ember.js, but having trouble getting the data to appear. The code can be found here:</p>
  
  
  
  <pre><code>var App = Ember.Application.create();
  
  App.ApplicationController = Ember.Controller.extend();
  App.ApplicationView = Ember.View.extend({
      templateName: 'application'
  });
  
  App.Movie = Ember.Object.extend({
      title: null,
      rating: null,
      release_date: null,
      poster_image: null
  });
  
  App.MoviesView = Ember.View.extend({
      templateName: 'movie-list'
  });
  
  App.moviesController = Ember.ArrayController.create({
      content: [],
      init: function(){
          var me = this;
          $.getJSON('/trailers/api/movies',function(data){
              me.set('content', []);
              $(data.movies).each(function(index,value){
                  var t = App.Movie.create({
                      title: value.title,
                      rating: value.rating,
                      release_date: value.release_date,
                      poster_image: value.poster_image
                  });
                  me.pushObject(t);
              })
          });
      }
  });
  
  App.router = Ember.Router.create({
      enableLogging: true,
      root: Ember.Route.extend({
          index: Ember.Route.extend({
              route: '/',
              redirectsTo: 'movies'
          }),
          movies: Ember.Route.extend({
              route: '/movies',
              connectOutlets: function(router) {
                return router.get('applicationController').connectOutlet({
                  viewClass: App.MoviesView,
                  controller: App.moviesController
                });
              }
          })
      })
  });
  
  App.initialize(App.router);
  </code></pre>
  
  
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
    &lt;h1&gt;Application&lt;/h1&gt;
    {{outlet}}
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="movie-list"&gt;
    &lt;h2&gt;Movie List&lt;/h2&gt;
    &lt;ul&gt;
    {{#each App.movieController}}
      &lt;li&gt;&lt;a {{action showMovie context="movie" href=true}}&gt;{{title}}&lt;/a&gt;&lt;/li&gt;
    {{/each}}
    &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/qmZrT/" rel="nofollow">http://jsfiddle.net/qmZrT/</a></p>
  
  <p>The templates load properly, in that I can see the "Application" and "Movie List" headers, but the unordered list does not fill with data.</p>
  
  <p>I don't get any errors in the console, the XML request is returned properly, and if I type App.moviesController.content, I get an array of "Class"es that appear to contain the data from my API.</p>
  
  <p>Can anyone provide any thoughts or guidance?</p>