can't save/update record using ember-data - ember.js

Question

My Router defines the following:
this.resource('uoms', { path: '/uoms' }, function() {
this.route('new');
});
And the uoms route is defined as:
App.UomsRoute = Ember.Route.extend({
model: function() {
return this.store.find('uom');
},
actions: {
save: function() {
this.modelFor('uoms').save().then(function() {
console.log("saved UOMs");
});
}
}
});
But for some reason when I try and save it I am getting:
Uncaught TypeError: Object [object Object] has no method 'save'
Can someone help me identify what I'm doing wrong?
---- UPDATE ----
I also tried the following from the controller but with the same results:
App.UomsController = Ember.ArrayController.extend({
actions: {
save: function() {
this.get('model').save().then(function() {
console.log("saved UOMs");
});
}
}
});
---- UPDATE 2 ----
Looking at the object returned by the this.get('model') call we get the following:

Answer 1

This is what I would do:
Using Chrome Developer Tools set a breakpoint at the line where you try to save the model
To inspect the model held by the controller enter this.get('model') the Chrome Developer Tools Console.
Check if the console output is really what you expect. Most probably it is not the model instance you want to save. You will see that you will get the same error when you execute this.get('model').save() in the console.
BTW: Why are you using an ArrayController and not an ObjectController. It looks like you use it for a single model. See the docs for more details on that.
Edit:
Try this.get('model').get('transaction').commit()

Answer 2

The problem I was running into was that I was trying to call save() on an array of records rather than a singular record. This problem was created because I was operating on a singular record but doing this within an ArrayController. I don't think there's anything wrong with this although it could be argued that I should have created a sub-route called "edit" and then presumably my code logic would have worked.
That said, if you want to do as I did (aka, save a singular record within an ArrayController) then this code will work:
save: function(id) {
var promise = this.store.find('uom',id).then(function(uom){
console.log(uom);
uom.save();
});
}
And then in the template put something like this:
<span class="glyphicon glyphicon-floppy-disk" {{action "save" id}}></span>
This works but is not the best answer. Instead you can specify in the ArrayController an ObjectController with the itemController property. Below is an example of both a save() and deleteRecord() handler using this strategy:
App.PluralController = Ember.ArrayController.extend({
itemController: 'singular'
});
App.SingularController = Ember.ObjectController.extend({
actions: {
save: function() {
this.get('model').save();
},
deleteRecord: function() {
this.get('model').deleteRecord();
this.get('model').save();
}
}
});
Then you'll want to do something like the following for your handlebars template:
<span class="glyphicon glyphicon-floppy-disk" {{action "save" this}}></span>
<span class="glyphicon glyphicon-remove-circle" {{action "deleteRecord" this}}></span>