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

3
votes

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;
}});
3
ember.jsember-data
What happens when you set a breakpoint on this.get('model').save(); and run this.get('model')? Is a model returned? - Oren Hizkiya
Like Oren is suggesting mostlikely you don't have a model, what does your route look like? - Asgaroth
If I set the breakpoint I do get an object, it has all the values as the model, it is: Object { id: 2, name: Getter, level: Getter, 2 more… }, but it still gives me .save() is not a function. - tbergq
My route looks like: App.TeamsRoute = Ember.Route.extend({ model : function() { var team = $.get('/teams/'); team.then(function(data){ console.log(data); }); return team; } }); - tbergq

3 Answers

2
votes

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?

2
votes

Your model seems to be an array of instances, since you're looping over it. You can't save an array of models. Instead, pass the current model to the action and save that specific one:

<button {{action "saveEdit" team}}>  {{! pass team to action }}
    Save
</button>

Then save that specific model:

saveEdit : function(model) {         // <== add parameter
    this.set('editMode', false);
    model.save();                    // <== save the specific model
}
2
votes

I know this is an old question but the issue is actually being caused by this.get('model') returning a promise rather than the ember data model ( hence why get('content') works ). The easiest solution to clean this up would be to modify your code to be the following 

App.TeamController = Ember.ObjectController.extend({
editMode : false,
actions : {
    enterEdit : function() {
        this.set('editMode', true);
    },
    saveEdit : function() {
        this.set('editMode', false);
        //this properly handles the promise that is returned 
        this.get('model').then(m => m.save());
    }
}});