Cannot delegate set('personName', s) to the 'content' property of object proxy <DS.PromiseObject:ember323>: its 'content' is undefined

Question

I am trying my hands on ember js and I am not able to use multiple models within models, single models with string attributes are easy...

model/client.js
export default DS.Model.extend({
  person: DS.belongsTo('person', {async: false, inverse: 'client'}),
  postalAddress : DS.belongsTo('address', {async: false}) ,
  residentialAddress : DS.belongsTo('address', {async: true})  ,
  personName: DS.attr('string'), //added from person
  greeting : DS.attr('string') //added from person
  });
model/person.js
export default DS.Model.extend({
  name : DS.attr('string'),
  personName : DS.attr('string'),
  greeting : DS.attr('string')  ,
  client: DS.belongsTo('client', {inverse: 'person'})
});

My Route routes/client/create

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return Ember.RSVP.hash({

        'client': this.get('store').createRecord('client'  ,
          { //does this not initialize person
            person: 'person', address: 'address'
          } ),
        // )
//does this not initialize person
          'person': this.get('store').createRecord('person',{
            client: 'client'
          }),
          'address': this.get('store').createRecord('address')
      }
    );
  }
});

my template has only one line :

{{client-form client=model.client  person=model.client.person address=model.client.residentialAddress errors=model.errors onSave=(action "save") }}

in my client-form.hbs i had some fields that referred to client.person.personName or client.person.greeting, and when i would type the first character I would get for greeting or personName

Assertion Failed: Cannot call set with 'greeting' on an undefined object.

So I added personName and greeting in client model directly as well and added two fields referring to client.personName and client.greeting and those fields dont give me any issue. I believe that the person model is not initialized and perhaps the client is instantiated but person and address is not and person is an undefined object.

The reason for such a model is that I have a java backend and my ClientDTO looks like:

public class ClientDTO /*implements IsSerializable*/ {

    private PersonDTO personDTO;
    private AddressDTO postalAddress;
    private AddressDTO residentialAddress;

Where have i missed initializing the person and address, I can find ppl having errors "cannot call get on undefined" but not in set. Edit: Now after looking at some examples online I changed my Controller to initialize some models

import Ember from 'ember';
export default Ember.Controller.extend({
  actions: {
    save() {
      console.log("yes controller");
      let client = this.model.client;
      let person=  this.model.person;
      let residentialAddress =  this.model.client.residentialAddress;
      client.save().then(() => {
        person.save();
        residentialAddress.save();
        this.transitionToRoute('message', {queryParams: {message: 'created'}});
      });
    }
  }
});

and changed my create route to

routes/client/create.js
    export default Ember.Route.extend({
      model() {
        return Ember.RSVP.hash({

           client: this.get('store').createRecord('client'  ,
            {
              person: 'person', residentialAddress: 'address'
            } ),
          // )

          party: this.get('store').createRecord('person',{
            client: '

client'
          }),
          residentialAddress : this.get('store').createRecord('address')

          }
        );
      }
    });

Now I get:

Assertion Failed: Cannot delegate set('partyName', aaa) to the 'content' property of object proxy <DS.PromiseObject:ember323>: its 'content' is undefined.

Which is justr another way of saying the same thing. I think i am not creating the models in the route correctly.

Answer 1

You are creating the models fine but not associating them correctly.

'client': this.get('store').createRecord('client'  , {
  person: 'person', // Here you are setting client.person to the string 'person', not to the person model
  address: 'address'
}),

What you want is more like:

let person = this.get('store').createRecord('person');
let address = this.get('store').createRecord('address');
return this.get('store').createRecord('client', { person: person, address: address );

// Or the same thing but use shorthand syntax to assign person and address
let person = this.get('store').createRecord('person');
let address = this.get('store').createRecord('address');
return this.get('store').createRecord('client', { person, address );

Then in your template just pass the client to your component

{{client-form client=model ...}}

And In your template use client.person etc.

If you still want to return a hash from the model hook you can do:

let person = this.get('store').createRecord('person');
let address = this.get('store').createRecord('address');
return Ember.RSVP.hash({
  client: this.get('store').createRecord('client', { person: person, address: address ),
  person: person,
  address: address
});