CODEWITHSUNDEEP
javascriptember.js
Jetchy
Jetchy

Reputation: 242

Emberjs - model hook returns null from BelongsTo relationship

I have a form within the new-phone route which populates a phone model. This model has a belongsTo relationship with the client.

App.Router.map(function() {
    this.resource("client", { path: "/client/:id" }, function(){
        this.resource("phone", function(){
            this.route("new-phone")
        })
    })
})

App.Client = DS.Model.extend({
    name: DS.attr(),
    phone: DS.belongsTo("Phone", { async: true })
});

App.Phone = DS.Model.extend({
    name: DS.attr(),
    model: DS.attr(),
    year: DS.attr()
});

When I complete the form, the response from the server comes back correctly with the newly created record.

I'm getting data from JSON driven API.

So I'm posting to:

POST: /api/client/1/phone

I have set the transition to go back to the phone.index page (after the save is complete) which in turn (should) fire the model hook (GET request: /api/client/1/phone) and get the new data for the (phones.index) page. But for some reason, I get a 'data is null' error from Ember. It doesn't even seem to make the request before this error appears.

If I use the HTTP requester outside of the Ember app, the data appears. 

App.ClientRoute = Ember.Route.extend({
    model: function(){
        return this.store.find("client", 1)
    }
});

App.PhoneIndexRoute = Ember.Route.extend({
    model: function(){
        return this.modelFor("client").get("phone").then(function(data){
            //Reload to manually get new data
            return data.reload();
        });
    }
})

This is the version of Ember I'm using:

DEBUG: Ember      : 1.8.1
DEBUG: Ember Data : 1.0.0-beta.11
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 1.10.2

Upvotes: 0

Views: 286

Answers (1)

kristjan reinhold
kristjan reinhold

Reputation: 2048

I dont think you need a new route to show a form for person's phone. Instead make a property to toggle when user clicks for phone form

Let's say your template looks like this

/user/1.hbs

{{model.user_name}} {{model.first_name}}

{{model.phone.number}}

{{#if showPhoneForm}}
    <div class="form">
          {{input value=model.phone.number placeholder="phone nr"}}
    </div>

    <div class="button" {{action "saveUser"}}> Save </button> // Save form data, hide user form, updaet user phone data
{{else}}
    <div class="button" {{action "makePhoneForm"}}> Add phone </button> // Create form for user
{{/if}}

controllers/user/

   showPhoneForm: false,
   actions: {
        makePhoneForm: function() {
          this.set('showPhoneForm', true); 
        },
        saveUser: function() {
          this.get('model.phone').then(function(phoneRecord) {
            phoneRecord.save().then(function(){
              this.set('showPhoneForm', false);
            }.bind(this): 
        }
     }

Upvotes: 0

Related Questions