vendredi 12 juin 2015

save store with hasmany and belong to relationship

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