CODEWITHSUNDEEP
ember.js
Mathew Andrews
Mathew Andrews

Reputation: 11

Ember JS - Cannot read property 'save' of undefined

In a nutshell, I have created a record ("claimant") in the model hook of a route, but when I try to get the "claimant" record in the actions handler, Ember says the record doesn't exist. As a result, when I try to save "claimant," Ember tells me that it "Cannot read property 'save' of undefined." My guess it is a problem with my initializer, but I'm stumped as to why.

Any help would be tremendously appreciated. Thanks!

The relevant code is as follows:

models/claimant.js

import attr from 'ember-data/attr';
import DS from 'ember-data';
import { belongsTo } from 'ember-data/relationships';

export default DS.Model.extend({
first_name: attr('string'),
submission: DS.belongsTo('submission', {async: false}),
});

models/submission.js

import DS from 'ember-data';
import { belongsTo } from 'ember-data/relationships';

export default DS.Model.extend({
claimant: belongsTo('claimant', {async: false}), 
});

routes/claimant.js

import Ember from 'ember';

export default Ember.Route.extend({
actions: {
    next: function() {
        let claimant = this.get('claimant');
        claimant.save().then(claimant => {
            this.get('submission').createSubmission({
            claimant: claimant
            });
        });
        this.transitionTo('defendant');
    },
},

model() {
    let claimant = this.get('store').createRecord('claimant', {
        first_name: this.get('first_name'),
        });
    return claimant;
}
});

NOTE: If I instead use let claimant = this.get('controller.model'); the record saves properly, but then the BelongsTo relationship between "submission" and "claimant" doesn't properly set. Not sure why.

initializers/submission-initializer.js

import Ember from 'ember';
const {isNone, isEmpty, merge} = Ember;

let submissionProxy = Ember.ObjectProxy.extend({
_currentSubmission: null,
_store:null,

content: function() {
    let currentSubmission = this.get('_currentSubmission');

    if (isEmpty(currentSubmission)) {
    currentSubmission = this.createSubmission();
    }
     return currentSubmission;
    }.property('_currentSubmission'),

current: Ember.computed.alias('content'),

createSubmission(data = {}) {

    let newSubmission = this.get('_store').createRecord('submission', data);   
    this.set('_currentSubmission', newSubmission);
    return newSubmission;
},
});

export function initialize(application) {
application.register('submission:proxy', submissionProxy, {singleton: true});
application.inject('submission:proxy', '_store', 'service:store');
application.inject('component', 'submission', 'submission:proxy');
application.inject('route', 'submission', 'submission:proxy');
application.inject('controller', 'submission', 'submission:proxy');
};

export default {
name: 'submission-initializer',
after: ['ember-data'],
initialize: initialize
};

templates/claimant.hbs

<h2 id="title">Welcome to the Claimant Page!</h2>

<form>
<div class="form-group">
  <label for="first_name">First Name</label>
  {{input id="first_name" class="form-control" value=model.first_name}}
</div>

<button class="btn btn-primary" {{action 'next' model}}>Next</button>
</form>

Upvotes: 1

Views: 853

Answers (1)

Chhirag Kataria
Chhirag Kataria

Reputation: 288

Two things - A) use this.get('model').save in your action (claimant is being returned by the model, but in your action, you have no way to access the local variable that is defined within the model - i.e. 'claimant')

B) In your model, first_name: this.get('first_name') will not work --> you might want to define a variable in your route and tie that to the input field in your hbs file and then access that variable in your model.

Hope this helps a bit!

Upvotes: 1

Related Questions