Ember JS cannot createRecord with new ember-data syntax

Question

I am trying to use the new ember-data syntax like explained here: https://github.com/emberjs/data/blob/master/TRANSITION.md (read from Transaction is Gone: Save Individual Records ).

When I hit the save button I get the error Uncaught TypeError: Cannot call method 'save' of undefined in the console. Also in the network tab, there is no POST request to the api.

The template

<script type="text/x-handlebars" data-template-name="landcode/new">
    Code: {{input value=code}}<br />
    Image: {{input value=image}}<br />
<button {{action 'saveLandcode'}}>opslaan</button>

The app.js (relevant code)

App.Router.map(function() {
    this.resource("landcodes"),
    this.resource("landcode", function() {
        this.route("new");
    });
});

App.LandcodeNewRoute = Ember.Route.extend({
    model: function() {
        this.store.createRecord('landcode');
    },
    actions: {
        saveLandcode: function(){
            this.modelFor('landcode').save(); // does not save
        }
    }
});

App.ApplicationAdapter = DS.RESTAdapter.extend({
    namespace: 'api'
});
App.Store = DS.Store.extend({
    adapter: 'App.ApplicationAdapter'
});

App.Landcode = DS.Model.extend({
    code: DS.attr('string'),
    image: DS.attr('string')
});

Marcio Junior · Accepted Answer · 2013-11-07 15:01:37Z

2

You are using this.modelFor('landcode') this will take the returned model from App.LandcodeRoute, but your model is returned from LandcodeNewRoute. Just use this.currentModel, since you want the model of the current route.

App.LandcodeNewRoute = Ember.Route.extend({
    model: function() {
        return this.store.createRecord('landcode');
    },
    actions: {
        saveLandcode: function(){
            this.currentModel.save();
        }
    }
});

edited Nov 7, 2013 at 15:01

answered Nov 7, 2013 at 14:56

Marcio Junior

19.1k4 gold badges47 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DelphiLynx Over a year ago

Both thanks for the answer. However both solutions give the same error as before. I go to setup a jsFiddle, then it will be clear to everyone what is going on.

Marcio Junior Over a year ago

I saw in your code that you are missing the return in this.store.createRecord ... Did you update your current implementation?

DelphiLynx Over a year ago

Hi Márcio, thanks for that last comment! Indead, I had missed that return statement you added. I removed my last JS Bin comment, setting up a Ember.js app on jsFiddle or JS Bin is a very unpleasant activity by the way. Now we have found the bug, thanks again!

Kingpin2k · Accepted Answer · 2013-11-07 18:33:25Z

2

Your model for should include the route name as well

App.LandcodeNewRoute = Ember.Route.extend({
    model: function() {
        return this.store.createRecord('landcode');
    },
    actions: {
        saveLandcode: function(){
            this.modelFor('landcode.new').save(); // the correct model
        }
    }
});

edited Nov 7, 2013 at 18:33

answered Nov 7, 2013 at 14:59

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

Collectives™ on Stack Overflow

Ember JS cannot createRecord with new ember-data syntax

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related