Basic Ember.js routing and data load

Question

In the constantly changing world of Ember.js, I'm looking for some help on getting a simple application up and running.

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:

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

<script type="text/x-handlebars" data-template-name="application">
  <h1>Application</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="movie-list">
  <h2>Movie List</h2>
  <ul>
  {{#each App.movieController}}
    <li><a {{action showMovie context="movie" href=true}}>{{title}}</a></li>
  {{/each}}
  </ul>
</script>

http://jsfiddle.net/qmZrT/

The templates load properly, in that I can see the "Application" and "Movie List" headers, but the unordered list does not fill with data.

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.

Can anyone provide any thoughts or guidance?

MilkyWayJoe MilkyWayJoe · Accepted Answer · 2012-08-12T05:59:05

There are a few problems with your script

The order you're loading the libraries: Ember depends on Handlebars, so it must be loaded before Ember. I've changed the order.
The {{action}} helper has changed in order to support multiple contexts: read this. Also you're trying to iterate the instance of moviesController but since you're using Router you should simply iterate through the controller which was injected with moviesController in you connectOutlets.
Your AJAX call will never work on JSFiddle for obvious reasons: the URL you're pointing to is on your environment and from JSFiddle you won't be able to hit that. I've added data to your collection manually so you see something running.

Here's a modified version of your code: JSFiddle Demo

Edit:

Unlike stated in the question, you do get errors in console:

Uncaught Error: <.ApplicationView:ember158> - Unable to find template "application".

This assertion helped me find the problem with order you added your scripts (handlebars and ember) since the template name was correct, meaning it matched with the name indicated in the view, so the problem had to be somewhere else. I've noticed on the "Manage Resources" tab in JSFiddle that you had Ember being loaded before Handlebars, and it makes a big difference.

Basic Ember.js routing and data load

1 Answers