Ember JS cannot createRecord with new ember-data syntax

1
votes

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')
});
2
ember.jsember-data

2 Answers

2
votes

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();
        }
    }
});
2
votes

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