Content is undefined when trying to work with a record in Ember

Question

I am trying to update a record in the Ember store. When I try to do this, it returns the following error:

Uncaught Error: Assertion Failed: Cannot delegate set('name', test) to the 'content' property of object proxy : its 'content' is undefined.

The controller looks like this:

import Ember from 'ember';

export default Ember.Controller.extend({
  model: null,
  event: {
    name: "test",
    id: "adfg8943224xcvsdf"
  },
  actions: {
    editEvent (event) {
      var Event = this.store.find('event', event.id);

      Event.set('name', event.name);
      Event.save()
    }
  }
});

The route looks like this:

import Ember from 'ember';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model () {
    return {
      event: this.store.find('event')
    }
  },
  setupController (controller, model) {
    controller.set('model', model);
  }
});

The template triggers the action, sending along a object called event, which has properties like name and id. The values of the event object come from the controller and have been set before triggering the editEvent action:

<form {{action 'editEvent' event on="submit"}}>

Doesn't find return a promise? Also, please show us the template code, especially the part where you are invoking the editEvent action--what is event exactly? — user663031
Find returns a class with a content class inside. Event is a object with properties like name and id. — Wouter Stolk
Did you mean to return a POJO from the model hook? Typically you would return a promise. Why are you wrapping the store.find in an object like that? Are you trying to load multiple models? — Sarus

Sarus Sarus · Accepted Answer · 2016-07-19T13:14:01

I believe what is happening is that your model hook is returning a POJO that contains a promise that will resolve. If you want to pass that to your action then you need to do

<form {{action 'editEvent' model.event on="submit"}}>

That being said you should really just return a promise from your model hook so that Ember will wait for your data to load before rendering the template. With the way you have it setup now, if your data takes a long time to load, someone could submit the form before the model is loaded and you'll get an error.

I think you want your route to look like this (no need to override setupController):

import Ember from 'ember';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model () {
    return this.store.find('event');        
  }
});

Then in your template:

<form {{action 'editEvent' model on="submit"}}>

If you need to load multiple models then you should use Ember.RSVP.hash.

See this answer: EmberJS: How to load multiple models on the same route?

Also, I'm not quite sure what your action is trying to do but you don't need to find the record again. The code you posted for your action doesn't actually do anything. It gets the event and then sets the event's name to its own name.

  actions: {
    editEvent (event) {
      // you already have the event, you passed it in as a parameter
      // you don't need to query the store again for it. 
      var Event = this.store.find('event', event.id);

      // This doesn't do anything as it just sets the event.name to itself
      Event.set('name', event.name);
      Event.save()
    }
  }

I think you mean to do this:

  actions: {
    editEvent (event) {
      event.set('name', 'updated name');
      event.save();
    }
  }

Content is undefined when trying to work with a record in Ember

1 Answers