Ember save component value (normal saving is no prob) - ember.js

Question

I am struggeling to get a gridster layout values saved in my model: normal saving isn't that big deal.. just the grid layout.. how to fix this part?
Component: Serialized data availible after resized grid
export default Ember.Component.extend({
tagname: "",
Setupgridster: function(){
Ember.$(".gridster ul").gridster({
widget_base_dimensions: [359, 232],
widget_margins: [5, 5],
testvalue: 213213,
helper: 'clone',
resize: {
enabled: true,
max_size: [3, 3],
min_size: [1, 1],
stop: function (e, ui, $widget) {
var widget_base_dimensions = this.serialize($widget)[0];
}
},
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
}
}).data('gridster');
}.on("didInsertElement")
});
Save controller
export default Ember.Controller.extend({
model: 'layout',
actions: {
save: function(){
var newName= this.store.createRecord('layout', {
title: this.get('title'),
/** Don't know how to get in here serialized gridster data **/
layout: this.get('gridsterdata')
});
newName.save();
alert('saved');
this.transitionToRoute('index');
}
});
Someone told me to intergrate the save option into the component itself as an action, but I haven't got a clue how to make this work. Could somebody fix this or make a suggestion. I should be really pleased! (looking allready 1 week on this issue)

Answer 1

so you found the gridster resize stop callback, all you should need to do is:
export default Ember.Component.extend({
tagname: "",
Setupgridster: function(){
var _this = this;
Ember.$(".gridster ul").gridster({
...
resize: {
stop: function (e, ui, $widget) {
_this.sendAction('save', your_params_here);
var widget_base_dimensions = this.serialize($widget)[0];
}
}
}).data('gridster');
}.on("didInsertElement")
});
and then in your template where you are using your component, bind the action:
{{gridster-component save='save'}}
and modify your controller save action to take whatever arguments you send from the component.