I have a store with "row" and "column" models (tr and td in the html), buttons add rows and columns into rows. I want to save the changes to server only when a "save" button is pressed.
At this time have done this code, it nearly work, but I have some problem with the "save" method : The "id" of row and columns came from server when they are saved, but when a row is saved it don't know allready the columns id, and visversa. So that the save method is buggy and the code not nice at all.
I beggin with Ember, certainly there is a better way to do that ?, thank you if you can give me some help. May be also something could be better done in my addRow and addColumn methods ?
Sorry my bad english
Ember 1.11 with restAdapter
App.IndexRoute = Ember.Route.extend({
model: function () {
return this.store.find('row');
},
setupController: function(controller, model) {
controller.set('model', model);
}
});
App.Row = DS.Model.extend({
titre: DS.attr('string'),
columns: DS.hasMany('column', {async: true, embedded: 'always'}),
});
App.Column = DS.Model.extend({
titre: DS.attr('string'),
row: DS.belongsTo('row', {async: true}),
});
App.RowSerializer = DS.RESTSerializer.extend({
serializeHasMany: function(record, json, relationship) {
var hasManyRecords, key;
key = relationship.key;
hasManyRecords = Ember.get(record, key);
if (hasManyRecords && relationship.options.embedded === "always") {
json[key] = [];
hasManyRecords.forEach(function(item, index) {
json[key].push(item.get('id'));
});
}else{
this._super(record, json, relationship);
}
}
});
App.IndexController = Ember.Controller.extend({
selectedColumn: null,
actions: {
save: function(){
var row = this.store.all('row');
row.forEach(function(r, index, self){
r.save().then(function(r2){
r2.get('columns').forEach(function(c){
c.set('row',r2);
c.save().then(function(){
r.save();
})
})
})
})
},
clickCol: function(column){
this.set('selectedColumn', column)
},
addRow: function(){
_this = this;
var newRow = _this.store.createRecord('row',{titre:'Titre row'});
var newColumn = _this.store.createRecord('column', {
titre: 'Titre colonne',
})
newRow.get('columns').addObject(newColumn);
},
addColumn: function(){
_this = this;
this.get('selectedColumn').get('row').then(function(r){
var newColumn = _this.store.createRecord('column', {
titre: 'Titre colonne',
row: r
})
})
}
}
})
Aucun commentaire:
Enregistrer un commentaire