如何在使用JSONAPI创建后更新Ember数据?

时间:2016-02-10 10:22:40

标签: ember.js ember-data

我不确定我在这里缺少什么,但在向API发送save()请求后,我发现模板中的列表没有更新。

我正在使用JSONAPI适配器,在创建完成后,它会返回一个包含所有新信息的相应的创建后有效负载响应,我可以看到实际更新note模型Ember Inspector正确地使用有效载荷中的信息。

我还尝试添加以下行:

get(this, 'notes').pushObject(note);

或者:

get(this, 'notes').addObject(note._internalModel);

我从SO和Ember论坛找到了,但他们都发出了警告:

The result of a server query (on testapp@model:note:) is immutable.

根据我的阅读,我认为JSONAPI适配器应该处理它(看起来它来自Ember Inspector),但我看不到模板中反映的任何变化。

我有以下内容:

route.js

import Ember from 'ember';

export default Ember.Route.extend({
    model(params) {

        return Ember.RSVP.hash({
            contact:    this.store.findRecord('contact', params.contact_id),
            notes:      this.store.query('note', {filter: {contact_id: params.contact_id}}),
            note:       this.store.createRecord('note'),
        });
    },

    setupController(controller, model) {
        controller.set('contact', model.contact);
        controller.set('notes', model.notes);
        controller.set('note', model.note);

    }
});

controller.js

import Ember from 'ember';

const {Controller, set, get} = Ember;

export default Controller.extend({

  actions: {
    // Note CRUD.. 
    store() {
        let note = get(this, 'note');
        set(note, 'contact', get(this, 'contact'));
        note.save();
        this.send('reset');
    },
    reset() {
        set(this, 'note', this.store.createRecord('note'));
    }

  },

});

template.hbs

{{#em-form model=note action="store"}}
  {{em-text rows="3" property="content" label="Note" placeholder="Enter a note..."}}
  <button type="button" class="btn btn-default" {{action "reset"}}>Reset</button>
{{/em-form}}

<ul>
  {{#each notes as |note|}}
    <li>{{note.content}}</li>
  {{/each}}
</ul>

另外,不确定这是否相关,但是在Ember Inspector中,即使模型已经从服务器填充了新的ID和时间戳等,我也注意到新项目和现有项目之间存在差异?

新:<testapp@model:note::ember1376:null>(注意空)

现有:<testapp@model:note::ember876:48> ..等

3 个答案:

答案 0 :(得分:1)

问题是您同时发出了帖子请求和查询请求。模型哈希上的notes数组将在查询时获取注释记录,这将不包括新创建的注释。

此外,在创建新笔记后,notes数组不会更新自身以包含新笔记。如果您希望这种情况发生,您可以在ember数据的过滤函数http://emberjs.com/api/data/classes/DS.Store.html#method_filter

中找到您要查找的功能。
public class FeeStructure
{
    public int ID { get; set; }
    public string fullProgramFee { get; set; }
    //public string Semester vise fee { get; set; } pending.
    public int? ProgramID { get; set; }
    public virtual Program Program { get; set; }
}

filter函数将同时发出对新数据的查询请求,并将查询本地ember数据存储以获取已加载的记录。因此,您必须提供客户端过滤器功能来过滤本地记录。

答案 1 :(得分:0)

我正在考虑将注释重命名为notesQuery(在路线中,留下作为模板中的注释),然后有一个计算机可以观察notesQuery和注意事项,例如note.isNew,所以可能:

notes: Ember.computed('notesQuery', 'note.isNew', function() {
  let result = [];
  result.pushObjects(this.get('notesQuery'));
  if (!this.get('note.isNew')) {
    result.addObject(this.get('note'));
  }
  return result;
})

我不确定isNew,您可能想要使用自己的某个属性,或http://emberjs.com/api/data/classes/DS.Model.html中列出的其他内容。

答案 2 :(得分:0)

接受的回答让我得到了解决方案:

这个答案让我得到了解决方案,虽然this.store.filter()方法已被折旧,但我能够用以下方法复制它:

route.js

model(params) {

    return RSVP.hash({
        contact:    this.store.findRecord('contact', params.contact_id),
        notes:      this.store.query('note', {filter: {contact_id: params.contact_id}}),

    });
},
setupController(controller, model) {

    controller.set('contact', model.contact);
    controller.set('note', this.store.createRecord('note'));

},

controller.js

allNotes: computed( function(){
    return this.store.peekAll('note');
}),

notes:  function() {
    return get(this, 'allNotes').filterBy('isNew', false);
}.property('allNotes.@each.isNew'),

因此,当新项目被创建时,它不再是新的&#39;。我不确定这是否万无一失(即如果一个音符以某种方式被推送到商店并与另一个联系人建立关系,peekAll()函数会将其提取,但我认为现在这样做。感谢。

相关问题