Search code examples
ember.jsember-data

Ember trying to update element gives this.get(...).save is not a function


I am trying to learn Ember, and i have gotten to read and write new elements to my backend server. I am somehow stuck when trying to update.

this is my controller

App.TeamController = Ember.ObjectController.extend({
editMode : false,
actions : {
    enterEdit : function() {
        this.set('editMode', true);
    },
    saveEdit : function() {
        this.set('editMode', false);
        this.get('model').save();
    }
}});

And this is my handlebar code:

    {{# each team in model itemController="team"}}
    {{# if team.editMode}}
    {{input type="text" id="newName" value=team.name class="form-control"}}
    {{input type="text" id="newLevel" value=team.level class="form-control"}}
    <button {{action "saveEdit"}}>Save</button>
    {{else}}
     <p>{{team.name}} : {{team.level}} <button {{action 'enterEdit'}}>edit</button></p>
    {{/if}}
{{/each}}

this gives me the following error message in the console:

TypeError: this.get(...).save is not a function.

I can not figure out what is wrong. Any help is appreciated.

EDIT:

My model:

App.Team = DS.Model.extend({
name: DS.attr('string'),
level: DS.attr('string')

});

my route

App.TeamsRoute = Ember.Route.extend({
model : function() {
    var team = $.get('/teams/');
    team.then(function(data){
        console.log(data);
    });
    return team;
}});

Solution

  • I had a similar problem, which I've found a very "hacky" solution for.

    Instead of:

    model.save()
    

    try this:

    model.get('content').save()
    

    This worked for me, although as a solution I'm not keen. Does anyone have cleaner work-around for this problem?