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 :

The Ember ObjectController saves itself this.get("model").save()
Laravel (REST api) receives the data and persist it, therefore creating a unique ID for it
The api return the new data (that respect Ember convention) with the proper ID
???? 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}}

Hmmm I haven't noticed this behavior. Are you using the latest beta version of Ember Data? If so, is the id not on the model or not on the controller (or not on either) after the model is saved? And could you post a bit of code or a JSBin to clarify what you're doing? — joegoldbeck
What does the JSON object look like that you're returning to Ember? — EmptyArsenal
Answer below, but there could be even more stuff going on. Could you add your CategoriesRoute code? — joegoldbeck
JSON looks fine. Maybe include a JSBin that has all your router code, as well as the code where you're accessing the id? — joegoldbeck

joegoldbeck joegoldbeck · Accepted Answer · 2014-04-03T16:54:02

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");
        });
    },

Reload from save() response with Ember-Data

2 Answers