how to put a child record between sibling records with ember data(beta 17 or higher)

Question

I had code that was working in earlier version of ember data(beta 3 and ember 1.5), but it is breaking in ember data ver 1.0.0 beta 15 and ember 1.10.0. I have a model that has parent/child relationship to itself.

    App.Question = DS.Model.extend({
        name: DS.attr('string'),
        childQuestions: DS.hasMany('question', {async: true, inverse: 'parentQuestion'}),
        parentQuestion: DS.belongsTo('question', {inverse: 'childQuestions'})
    });

Now I want to add child question within a parent question in any position i want. I was able to add/delete question at any position before but now I am not able to do so. This is the core logic for adding model that I had:

addChild: function (parent, afterChild) {
    var position = parent.get('childQuestions').indexOf(afterChild),
            store = this.get('store'),
            jqXHR = Ember.$.ajax({
                url: '/questions',
                dataType: 'json',
                type: 'POST',
                data: {
                    parentQuestion: parent.get('id')
                }
            });


    jqXHR.done(function (data) {
        Ember.run(function () {
            // In later versions of Ember Data, this method returns the actual record
            // that was created so we don't have to hunt for it again with `store.find()`.
            store.pushPayload('question', data);

            store.find('question', data.question.id).then(function (question) {
                parent.get('childQuestions').insertAt(position + 1, question);
            });
        });
    });
}

So now this is breaking and creates these 2 issues for me:

1) cannot move the newly added question in desired position

2) if i add some new question and then delete some of them and then add yet another new question, then it brings back all the deleted questions back. I checked in the store and no these records are no longer in the store!!

Here is a jsbin to demonstrate the issues I was having: http://emberjs.jsbin.com/geqowibume/1/

I am assuming that I was using old version of both ember data and ember, I must be doing this the wrong(non ember) way, you insight on how to properly solve these will be much appreciated. thanks.

UPDATE: found bug raised on this https://github.com/emberjs/data/issues/2666

Ember data 1.0.0 beta 12 seems to get rid of problem 2, but 1 is still an issue!

Deewendra Shrestha Deewendra Shrestha · Accepted Answer · 2015-03-02T15:06:31

ok I did find a solution to solve both of my problems :

addChild: function(parent, afterChild) {
    var position = parent.get('childQuestions').indexOf(afterChild),
        store = this.get('store'),
        jqXHR = Ember.$.ajax({
            url: '/questions',
            dataType: 'json',
            type: 'POST',
            data: {
                parentQuestion: parent.get('id')
            }
        });

    jqXHR.done(function(data) {
        Ember.run(function() {
            store.pushPayload('question', data);

            store.find('question', data.question.id).then(function(question) {
                var childQuestionsArray = parent.get('childQuestions').toArray();
                childQuestionsArray.filterBy('isDeleted', false);
                childQuestionsArray.insertAt(position + 1, question);
                parent.get('childQuestions').clear();
                parent.get('childQuestions').pushObjects(childQuestionsArray);

            });
        });
    });
}

UPDATE : thought it was working but not anymore, adding child records under newly added records causes the child record to show up at the bottom!! http://jsbin.com/limagufiwa/edit?html,js,output

how to put a child record between sibling records with ember data(beta 17 or higher)

1 Answers