CODEWITHSUNDEEP
ruby-on-railsember.jsember-data
SoyTeins
SoyTeins

Reputation: 11

Ember - after saving model, how to get id in success callback from promise

Simple scenario in Ember-1.9.1, Ember-Data 1.0.0-beta.14.1:

Template form:

form
  fieldset
    dl
      dt: label First Name:
      dd: view Ember.TextField value=fields.first_name classNames='form-control'

    dl
      dt: label Last Name:
      dd: view Ember.TextField value=fields.last_name classNames='form-control'

    dl
      dt: label Sex:
      dd: view Ember.Select content=App.Patient.SEX prompt='Select a sex.' value=fields.sex classNames='form-control'

    dl
      dt: label Date of Birth:
      dd: view Ember.TextField value=fields.date_of_birth type="date" classNames='form-control'

    dl
      dt: label Insurance Provider:
      dd {{view Ember.Select content=insuranceProviders prompt='Select an insurance provider.' optionLabelPath='content.name' optionValuePath='content.id' value=currentInsuranceProvider.id classNames='form-control'}}
    dl
      dt: label Insurance Policy Number:
      dd: view Ember.TextField value=fields.insurance_policy_number classNames='form-control'

  fieldset.actions
    input type='submit' value='Create Patient' click="createPatient" class='btn btn-default'
    '
    a.cancel href="#" click="cancel" cancel

Controller Action:

createPatient: function() {
  var self = this;
  var fields = this.get('fields')
  fields.insurance_provider_id = this.currentInsuranceProvider.id

  if (App.Patient.valid(fields)) {
    var patient = this.store.createRecord('patient', fields)

    patient.set('date_of_birth', new Date(moment(fields.date_of_birth).format()));

    patient.set('insurance_provider', this.insuranceProviders.findBy('id', this.currentInsuranceProvider.id));

    patient.save().then(function(savedPatient){
      debugger
      self.transitionToRoute('patient', savedPatient);
    }).catch(failure);

    function failure(reason) {
      this.set('showError', true);
    }
  } else {
    this.set('showError', true)
  }
}

Show 'patient' Route:

App.PatientRoute = Ember.Route.extend({
   model: function(params) { return this.store.find('patient', params.id); }
})

Returned in the JS console:

> savedPatient

< Class {id: null, store: Class, container: Container, _changesToSync: Object, _deferredTriggers: Array[0]…}

> savedPatient.get('id')

< null

Why can't I get the id of the saved model in the success callback (where the debugger statement is) ? It does transition successfully, but with a null id in the route. This then causes problems if you want to edit the newly created model, after transitioning.

Have also tried reloading the savedModel in the callback, which is not actually possible without the model's id. It seems as though the id isn't available until the Store is reloaded on the synchronous page refresh, updating it with the server and the server's id for the model. How is this possible to update the store within the callback?

UPDATED

Answer: Rails backend wasn't rendering the proper JSON.

def create
  patient = Patient.create(patient_params)
  render json: { :patient => [patient] }
end

Upvotes: 0

Views: 1033

Answers (1)

andrusieczko
andrusieczko

Reputation: 2824

If you do patient.save(), then the POST request is sent. If you want to do it in a standard way, then after you persist the record in your database, you should return the valid response that is understood by Ember.

Example of the POST /patients response:

{
  "patient": [{
    "id: "newly-created-id",
    // all the rest of the fields
  }]
}

You still can return it in the different way but then you should transform it using Ember's serializer. However, you have to provide id in your response.

Upvotes: 1

Related Questions