Reload from save() response with Ember-Data

Question

I'm currently using EmberJs along with Ember-Data to build an app backed by a Laravel JSON api.

I got a little issue on the saving process, mostly on model creation.

Here is my workflow :

1. The Ember ObjectController saves itself this.get("model").save()
2. Laravel (REST api) receives the data and persist it, therefore creating a unique ID for it
3. The api return the new data (that respect Ember convention) with the proper ID
4. ???? Ember-Data doesn't seems to care about the response since it does nothing...

The problem here : the id remains undefined even if it has been given...

The workaround I found is to reload models... but it's a big performance flaw considering that the data I want to be reloaded it available to Ember straight after the save()

any ideas ?

EDIT **

The problem only occurs on the first object that I add. When I repeat the process the next objects are refreshed correctly. If I hit refresh, it start again : the first object miss his refresh and the following are okay.

Here my code about the add process :

route

App.CategoriesNewRoute = Ember.Route.extend({
    model: function()
    {
        return this.store.createRecord("category").set("active", true);
    },
    setupController: function(ctrl, model)
    {
        ctrl.set("errors", 0);
        ctrl.set("model", model);
    }
});

I don't have any Router for CategoriesRoute since the data is all in my ArrayController from the start.

controller

App.CategoriesNewController = Ember.ObjectController.extend({
    needs: "application",
    actions:
    {
        save: function()
        {
            this.get("model").save();
            this.get("target").transitionTo("categories");    
        },
        cancel: function()
        {
            this.get("model").rollback();
            this.get("target").transitionTo("categories");
        }
    }
});

EDIT ** 2 I tried the code provided below with no success...

I added 2 records, and the first don't have it's ID... the second got it, so the problem appears to only be on the first save...

Here are the 2 responses I got from my API

ObjectA

{"category":{"nameFr":"aaa","nameEn":"aaa","active":true,"id":10}}

ObjectB

{"category":{"nameFr":"bbb","nameEn":"bbb","active":true,"id":11}}

Answer 1

It could be because you're transitioning before the save finishes, and so the model hook on the categories route fires while the model you're saving is still in flight (are you getting any errors in the console?). Try changing the save action to

    save: function()
    {
        var that = this;
        this.get("model").save().then(function(){
            that.get("target").transitionTo("categories");
        });
    },

Also, you don't need to this.get('target')... as there's a controller method transitionToRoute . You can simplify to:

    save: function()
    {
        var that = this;
        this.get("model").save().then(function(){
            that.transitionToRoute("categories");
        });
    },

Answer 2

Found that the problem seems to be on Ember-Data's side...

documented the whole thing here :

http://discuss.emberjs.com/t/missing-id-on-first-save-on-a-new-object/4752