Newly added child record not shown in parent view in emberjs(only shown after refreshing the page)

Question

I am adding child records to a parent record. The problem i am facing here is whenever i add a new 'item' to my 'form' model, the newly added item is not being shown in the editor template where all the list of items are shown. Only when i refresh the page, can i see the newly added 'item' record. Can anyone tell me why this is? The change is even reflected in the ember-data where i could see the newly added record 'item' These are my model associations

    Eidos.Form = DS.Model.extend({
      name: DS.attr('string'),
      items: DS.hasMany('item',{async:true})

    });

and child model is

      Eidos.Item = DS.Model.extend({
      qtitle: DS.attr('string'),
      qhelp: DS.attr('string')
    )};

This is my editor route model hook for each form_id where i edit the form and add items to this model object.

model: function(){
    return this.modelFor('form');
}

this is my controller action where i add child record

    additem: function(form){
        var title = this.get('qtitle');
        var help_text = this.get('qhelp');
        console.log(title,help_text);
        // var items = form.get('items');
        var item = this.store.createRecord('item', {
            qtitle: title,
            qhelp: help_text,
            form: form
        });
        item.save().then(function(){
            console.log('item successfully created');
                    });

        this.set('qtitle','');
        this.set('qhelp','');
        this.transitionToRoute('editor');

    }

And my editor template is

    {{#each item in items}}
        <br><strong>{{item.qtitle}}</strong>
        <strong> {{item.qhelp}}</strong>
    {{/each}}
    <form {{action 'additem' this on='submit'}}
    <strong> Question title: {{input type='text' placeholder='enter the question title' size='40' valueBinding='qtitle'}} <hr>
    Help text: {{input type='text' placeholder='enter the help text' size='60' valueBinding='qhelp'}}
    <button class='btn btn-success'> Done adding Item </button>

Everything is working fine, i was able to create a item record which is associated with the form_id. The only problem i am facing is, the editor template is not showing the recently added child record. whenever i add a new child record with the 'additem' action in the controller. Can anyone help me with this problem?

Surendra Bobba Surendra Bobba · Accepted Answer · 2013-12-30T08:44:50

It is really simple thing, just need to push the newly created child record to the parent record by using 'pushObject' method to reflect the change in the handlebars template.

http://railscasts.com/episodes/408-ember-part-1?view=asciicast

I already knew this, but made some silly syntax errors.

This is the correct code

        item.save().then(function(){
            console.log('item successfully created');
        });
        this.get('items').pushObject(item);

Newly added child record not shown in parent view in emberjs(only shown after refreshing the page)

1 Answers