I get these error messages upon loading the page:

Assertion failed: The value that #each loops over must be an Array.
    You passed (generated snippets.index controller) ember-1.0.0.js:394

Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'

Here is my template code:

<script type="text/x-handlebars" data-template-name="snippets/index">
  {{#each}}
    {{title}}
  {{/each}}
</script>

My 'Snippet' model is quite simple:

TSLibrary.Snippet = DS.Model.extend({
  title: DS.attr('string')
});

TSLibrary.Snippet.FIXTURES = [{id: 1, title: 'Learn Ember.js'}];

My app and my router:

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

TSLibrary.ApplicationAdapter = DS.FixtureAdapter.extend();

// ---

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

TSLibrary.SnippetsRoute = Ember.Route.extend({
  model: function () {
    // My guess is that this does not return the expected array
    //
    // This logs 'Class {toString: function, constructor: function, reason: null, isPending: undefined, isSettled: undefined…}'

    console.log(this.store.find('snippet'));
    return this.store.find('snippet');
  }
});

So my guess is that this.store.find('snippet') is not returning the right data. I've also installed the Ember debug extension in Chrome and it shows me all the right data in my model.

Ember version: 1.0.0
Ember Data version: v1.0.0-beta.1-140-ga51f29c a51f29c (2013-09-07 16:34:55 -0700)
Handlebars version: 1.0.0
jQuery version: 1.10.2

I get these error messages upon loading the page:

Assertion failed: The value that #each loops over must be an Array.
    You passed (generated snippets.index controller) ember-1.0.0.js:394

Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'

Here is my template code:

<script type="text/x-handlebars" data-template-name="snippets/index">
  {{#each}}
    {{title}}
  {{/each}}
</script>

My 'Snippet' model is quite simple:

TSLibrary.Snippet = DS.Model.extend({
  title: DS.attr('string')
});

TSLibrary.Snippet.FIXTURES = [{id: 1, title: 'Learn Ember.js'}];

My app and my router:

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

TSLibrary.ApplicationAdapter = DS.FixtureAdapter.extend();

// ---

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

TSLibrary.SnippetsRoute = Ember.Route.extend({
  model: function () {
    // My guess is that this does not return the expected array
    //
    // This logs 'Class {toString: function, constructor: function, reason: null, isPending: undefined, isSettled: undefined…}'

    console.log(this.store.find('snippet'));
    return this.store.find('snippet');
  }
});

So my guess is that this.store.find('snippet') is not returning the right data. I've also installed the Ember debug extension in Chrome and it shows me all the right data in my model.

Ember version: 1.0.0
Ember Data version: v1.0.0-beta.1-140-ga51f29c a51f29c (2013-09-07 16:34:55 -0700)
Handlebars version: 1.0.0
jQuery version: 1.10.2

• javascript
• ember.js

Share Improve this question Follow asked Sep 8, 2013 at 21:02 ComFreekComFreek 29.5k1818 gold badges107107 silver badges157157 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

This way creates the 'snippets.index' path, which requires a Route called SnippetsIndexRoute.

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

This one is just 'snippets', which correctly uses the SnippetsRoute that you have defined.

I found the solution by accident, now:

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

has to be

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