在emberjs的父视图中未显示新添加的子记录(仅在刷新页面后显示)

时间:2013-12-30 07:19:13

标签: ruby-on-rails ember.js ember-data handlebars.js

我将子记录添加到父记录中。我在这里遇到的问题是每当我向我的'form'模型添加一个新的'item'时,新添加的项目都没有显示在编辑器模板中,其中显示了所有项目列表。只有当我刷新页面时,才能看到新添加的“项目”记录。谁能告诉我为什么会这样?这个变化甚至反映在余烬数据中我可以看到新添加的记录“项目” 这些是我的模型关联

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

    });

和儿童模型是

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

这是我每个form_id的编辑器路径模型钩子,我编辑表单并将项目添加到此模型对象。

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

这是我的控制器操作,我添加子记录

    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');

    }

我的编辑模板是

    {{#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>

一切正常,我能够创建与form_id相关联的项记录。 我面临的唯一问题是,编辑器模板没有显示最近添加的子记录。每当我在控制器中添加一个带有“additem”动作的新子记录时。 任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

这很简单,只需要使用&#39; pushObject&#39;将新创建的子记录推送到父记录。反映车把模板变化的方法。

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

我已经知道了这一点,但却犯了一些愚蠢的语法错误。

这是正确的代码

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