Ember.js Error: No model was found for 'id' while saving record using ember-data

Question

I am developing simple CRUD application in Ember.js and Ruby on Rails

Versions:

DEBUG: Ember      : 1.6.0-beta.3 ember.js?body=1:3917
DEBUG: Ember Data : 1.0.0-beta.7+canary.f482da04 ember.js?body=1:3917
DEBUG: Handlebars : 1.3.0 ember.js?body=1:3917
DEBUG: jQuery     : 1.11.0 

Ruby on Rails 4.0.3

I am using Railscasts tutorial pretty good, but some things have changed a lot (e.g. ember-data).

Railscasts Ember tutorial github source

--

When I save record, it throws 2 exceptions:

Error: No model was found for 'id'

  at new Error                                   (native)
  at Error.EmberError                            (http://localhost:3000/assets/ember.js?body=1:2979:23)
  at Ember.Object.extend.modelFor                (http://localhost:3000/assets/ember-data.js?body=1:9806:33)
  at JSONSerializer.extend.extractSingle         (http://localhost:3000/assets/ember-data.js?body=1:3019:28)
  at apply                                       (http://localhost:3000/assets/ember.js?body=1:7984:27)
  at superWrapper     [as extractSingle]         (http://localhost:3000/assets/ember.js?body=1:7569:15)
  at Ember.Object.extend.extractSave             (http://localhost:3000/assets/ember-data.js?body=1:2509:21)
  at Ember.Object.extend.extractCreateRecord     (http://localhost:3000/assets/ember-data.js?body=1:2438:21)
  at Ember.Object.extend.extract                 (http://localhost:3000/assets/ember-data.js?body=1:2366:37)
  at http://localhost:3000/assets/ember-data.js?body=1:10434:32 

Second error is:

Uncaught Error: Assertion Failed: Error: No model was found for 'id' ember.js?body=1:118

  Ember.assert                                           ember.js?body=1:118
  RSVP.onerrorDefault                                    ember.js?body=1:46739
  __exports__.default.trigger                            ember.js?body=1:9493
  Promise._onerror                                       ember.js?body=1:10217
  publishRejection                                       ember.js?body=1:10624
  (anonymous function)                                   ember.js?body=1:16010
  DeferredActionQueues.invoke                            ember.js?body=1:8592
  DeferredActionQueues.flush                             ember.js?body=1:8642
  Backburner.end                                         ember.js?body=1:8095
  Backburner.run                                         ember.js?body=1:8152
  apply                                                  ember.js?body=1:7984
  run                                                    ember.js?body=1:6630
  hash.success                                           ember-data.js?body=1:1524
  fire                                                   jquery.js?body=1:3100
  self.fireWith                                          jquery.js?body=1:3212
  done                                                   jquery.js?body=1:9311
  callback                                               jquery.js?body=1:9721

--

Code:

-router.js

EmTasks.Router.map(function(){
  return this.route("lists", {
    path: '/'
  });
});

EmTasks.ListsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('list');
  }
});

-controller/lists_controller.js

EmTasks.ListsController = Em.ArrayController.extend({
  addList: function() {
    this.store.createRecord('list', {
      name: this.get('newListName')
    }).save();
    return this.set('newListName', '');
  }
});

-models/list.js

EmTasks.List = DS.Model.extend({
  name: DS.attr('string')
});

-templates/lists.handlebars

<div id="container">
  <h1>em-tasks</h1>
  {{view Ember.TextField valueBinding="newListName" action="addList"}}
  {{newListName}}

  {{#each controller}}
    <p>{{name}}</p>
  {{/each}}
</div>

--

Github repository with all code:

https://github.com/maciejkowalski/em-tasks/tree/96539b93eab48cc0405e9644f604242832889762

Answer 1

I have found a solution.

Just set self.include_root_in_json to true in Rails.

-config/initializers/wrap_parameters.rb

ActiveSupport.on_load(:active_record) do
 self.include_root_in_json = true
end

then we get in JSON response

{
  list: {
    id: 1,
    name: "icebox"
  }
}

instead of

{
  id: 1,
  name: "icebox"
}

--

More info:

Why am I getting an error after successful deleteRecord in Ember

Ember.js REST Adapter without JSON root