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;
}});
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());
}
}});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With