Uncaught Error: No model was found for 'model'

Question

I'm building an Ember-CLI app using the following:

DEBUG: Ember                          : 1.10.0
DEBUG: Ember Data                     : 1.0.0-beta.15
DEBUG: jQuery                         : 2.1.3

Using a form, I'm trying to save changes on 2 separate models. One of the models (the user model) saves successfully, while the other (profile model) throws this error:

Uncaught Error: No model was found for 'userProfile'

Models

The two models in question are:

models/user.js
models/user/profile.js

user model:

import DS from "ember-data";

export default DS.Model.extend({
    email: DS.attr('string'),
    username: DS.attr('string'),
    firstname: DS.attr('string'),
    lastname: DS.attr('string'),
    comments: DS.hasMany('comments'),
});

profile model:

import DS from "ember-data";

export default DS.Model.extend({
  avatar: DS.attr('string'),
  educationDegree: DS.attr('string'),
  educationUniversity: DS.attr('string'),
  workRole: DS.attr('string'),
  workOrganisation: DS.attr('string'),
  interests: DS.attr('string'),
});

Controller

import Ember from "ember";

export default Ember.Controller.extend({
  saved:false,
  actions: {
    save:function(){
      this.get('model.user').save();
      this.get('model.profile').save();
      this.set('saved',true);
    },
  },
});

Route

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model: function(){
    var _this = this;
    var currentUser = this.get('session.user');

    return new Ember.RSVP.all([
      _this.store.find('user', currentUser.id),
      _this.store.find('user.profile', {UserId: currentUser.id}),
    ]).then(function(values){
      return {
        user: values[0],
        profile: values[1].get('firstObject'),
      }
    });
  },
});

Template

<form {{action "save" on="submit"}}>
  {{input type="text" placeholder="First Name" value=model.user.firstname}}
  {{input type="text" placeholder="Last Name" value=model.user.lastname}}
  {{input type="email" placeholder="Email" value=model.user.email}}
  {{input type="text" placeholder="Affiliation" value=model.profile.workOrganisation}}
  <button type="submit" class="btn teal white-text">Save</button>
  {{#if saved}}
    <p class="text-valid">Save Successful.</p>
  {{/if}}
</form>

Unknown Unknown · Accepted Answer · 2015-05-24T16:19:46

This error occurs because Ember Data cannot find a model into which to insert the data coming back from the PUT ensuing from the save, which I assume looks like

{ userProfile: { ... } }

I don't know the exact rules by which Ember looks up models based on these "root keys" such as userProfile, but I doubt if it can find the profile model hiding down underneath models/user/.

In the past the following has worked for me, if you have control over the server:

{ "user/profile": { ... } }

If you can't change the server response, or this fails to work for some other reason, the simplest thing to do is to move the profile model up to the top level of the models directory and name it user-profile.js.

Another alternative is to play with modelNameFromPayloadKey:

// serializers/application.js
import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    modelNameFromPayloadKey: function(payloadKey) {
        if (payloadKey === 'userProfile') payloadKey = 'user/profile';
        return this._super(payloadKey);
    }
 });

Uncaught Error: No model was found for 'model'

1 Answers