Ember todos: an Ember.CollectionView's content must implement Ember.Array

Question

I'm trying to get my head around Ember and going through the todos tutorial. I get stuck on the displaying-model-data step here http://emberjs.com/guides/getting-started/displaying-model-data/

here's the javascript i copied and pasted from the tutorial:

window.Todos = Ember.Application.create();

Todos.Router.map(function () {
  this.resource('todos', { path: '/' });
});

Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return Todos.Todo.find();
  }
});

Todos.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});

Todos.Todo = DS.Model.extend({
  title: DS.attr('string'),
  isCompleted: DS.attr('boolean')
});

Todos.Todo.FIXTURES = [
  {
    id: 1,
    title: 'Learn Ember.js',
    isCompleted: true
  },
  {
    id: 2,
    title: '...',
    isCompleted: false
  },
  {
    id: 3,
    title: 'Profit!',
    isCompleted: false
  }
];

Then here's my handlebars template:

...
          {{#each controller}}
            <li>
              <input type="checkbox" class="toggle">
              <label>{{title}}</label><button class="destroy"></button>
            </li>
          {{/each}}

And yet I get this error

Uncaught Error: assertion failed: an Ember.CollectionView's content must implement Ember.Array. You passed <(generated todos controller):ember257> 

It looks to me like whatever default controller object Ember generates should be of type Ember.Array but it is not happening for some reason. I am wondering if it is a problem with ember-data?

I am using all the files from the starter kit which are ember 1.0.0 rc5 handlebars 1.0.0 rc4 jquery 1.9.1 and ember-data, the only versioning indication i can tell is from a comment

// Last commit: 3981a7c (2013-05-28 05:00:14 -0700)

Is there a dependency problem someone knows about or did I do something wrong?

Answer 1

I wouldn't say its a problem with ember data, since that module is responsible only for talking to the api and giving you clever model objects.

You were right in saying ember is generating the wrong type of controller. By default Ember will probably generate a Controller, when what you need is an ArrayController. To get around the issue, simply create an empty controller like this

Todo.TodosController = Em.ArrayController.extend({});

The guide does say that ember creates an ArrayController, but perhaps it doesn't anymore!? let me know if it works by explicitly creating an arraycontroller. If it does we can let the ember team know.

Answer 2

I had this exact same issue today walking through the Getting Started Guide but it appeared to be due to a typo.

According to the documentation, the generated controller is supposed to be of type ArrayController. I dug into the Ember source and found the Ember.generateController method that generates the controller depending on the context. I set a break point and found that when Ember was trying to create a controller for the "Todos" route, the context was undefined, so the basic controller was generated.

Working backward from there, I set a breakpoint on the model function of my router to see what it was returning but found it was not being called at all. At this point, I began to get suspicious that I had done something wrong. And that is when I noticed that I had named the TodosRoute as TodosRouter (as you have in your original question). Changing the name to TodosRoute correctly called my model function and everything worked as expected. It was not necessary to include the line that explicitly created the TodosController as an ArrayController.

While it appears you had it correct in your question, I wanted to post this here in case someone else has the same issue.

Answer 3

Adding the line Gevious suggested corrected this issue for me. For clarification my router.js file now looks like this:

 Todos.Router.map(function(){
   this.resource('todos', {path: '/'});
});

Todos.TodosRoute = Ember.Route.extend({
  model: function () {
    return Todos.Todo.find();
  }
});

Todos.TodosController = Em.ArrayController.extend({});