EmberJS: Error while loading route: TypeError: Cannot read property 'map' of null

Question

I just started learning Ember, and somehow I can't get it to work on even the simplest thing. I'm using Ember-Data's Fixtures to work on the MVC part without focusing too much on data retrieval for now.

Here's what I have so far:

// Engine

window.Monitor = Ember.Application.create();
Monitor.ApplicationAdapter = DS.FixtureAdapter.extend();

// Routes

Monitor.Router.map(function() {
  this.resource('processes', { path: '/' });
});
Monitor.ProcessesRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('process');
  }
});

// Data model

Monitor.Process = DS.Model.extend({
  name: DS.attr('string'),
  alt: DS.attr('string'),
  icon: DS.attr('string'),
  link: DS.attr('string')
});

// Controllers

Monitor.ProcessesController = Ember.ArrayController.extend({
  itemController: 'process',
  sortProperties: ['name'],
  sortAscending: true
});

Monitor.ProcessController = Ember.ObjectController.extend();

// Test data

Monitor.Process.FIXTURES = [
 {
  name: 'MyTestProcess',
  icon: 'link to icon'
 }
];

It's Ember 101, yet I can't wrap my head around why simply typing this:

<div class="navtitle">
    Title
</div>

{{#each}}
<li>
    <label>{{name}}</label>
</li>
{{/each}}

... fails with that:

Error while loading route: TypeError: Cannot read property 'map' of null
    at Ember.EnumerableUtils.map (http://www.somedomain.com/js/ember-1.5.1.js:1918:15)
    at Ember.Object.extend.pushMany (http://www.somedomain.com/js/ember-data.js:10:6083)
    at http://www.somedomain.com/js/ember-data.js:9:31369
    at invokeCallback (http://www.somedomain.com/js/ember-1.5.1.js:10013:19)
    at publish (http://www.somedomain.com/js/ember-1.5.1.js:9683:9)
    at publishFulfillment (http://www.somedomain.com/js/ember-1.5.1.js:10103:7)
    at http://www.somedomain.com/js/ember-1.5.1.js:18380:7
    at Object.DeferredActionQueues.flush (http://www.somedomain.com/js/ember-1.5.1.js:6127:24)
    at Object.Backburner.end (http://www.somedomain.com/js/ember-1.5.1.js:6215:27)
    at Object.Backburner.run (http://www.somedomain.com/js/ember-1.5.1.js:6254:18)

Any pointers on what I'm doing wrong?

Answer 1

In your template, you have {{#each}}...{{/each}} , which is used when you have an array as your route model. But your controller is an ObjectController , so it treats the array as a single object and not as the array that it is. Extend from ArrayController instead.

Answer 2

So, in the end, I found the solution by starting from scratch again. It seems that your app needs to have an ApplicationRoute and ApplicationController .

Those will be the ones used by default if you don't specify the scope of handlebars, and will be generated auttomagically if not defined.

In my case, renaming everything "Processes" to "Application" fixed my problem.