创建新记录时如何根据 DS.hasMany 属性更新 Ember 计算数组？答案

【问题标题】：How to make Ember computed array based on DS.hasMany property update when a new record is created?创建新记录时如何根据 DS.hasMany 属性更新 Ember 计算数组？
【发布时间】：2015-12-21 00:31:25
【问题描述】：

DEBUG: -------------------------------
DEBUG: Ember             : 2.2.0
DEBUG: Ember Data        : 2.1.0
DEBUG: jQuery            : 2.1.4
DEBUG: Model Fragments   : 2.0.0
DEBUG: Ember Simple Auth : 1.0.0
DEBUG: -------------------------------

我的模型有一个计算属性 upcomingReminders，用于过滤和排序 DS.hasMany 属性 reminders。

# app/models/job.js
import Ember from 'ember';
import DS from 'ember-data';

export default DS.Model.extend({
  // ...
  reminders: DS.hasMany( 'reminder', { "async": true } ),
  undoneReminders: Ember.computed.filterBy('reminders', 'done', false),
  upcomingReminders: Ember.computed.sort('undoneReminders', 'undoneSorting')
});

我在路线中创建一条新记录，如下所示：

# app/routes/dashboard/jobs/show/reminders/new.js
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let newRecord = this.get('store').createRecord( 'reminder' , { 
      target: this.modelFor("dashboard.jobs.show")
    });
    return newRecord;
  }
});

然后像这样从控制器中保存它：

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save() {
      this.get('model').save().then( (model) => {
        let target = model.get('target');
        this.transitionToRoute('dashboard.jobs.show.reminders', target );
      });
    }
  }
});

模板如下所示：

<div class="valign-wrapper right">
  {{#link-to "dashboard.jobs.show.reminders.new" model class="right"}}
    {{md-btn text="Add Reminder" icon='mdi-content-add' class='green'}}
  {{/link-to}}
</div>

{{#each model.upcomingReminders as |reminder|}}
  {{reminder-widget reminder=reminder}}
{{else}}
  There are no upcoming reminders
{{/each}}

{{outlet}}

当我保存模型时，它不会显示在列表中，直到我刷新页面，虽然它会立即显示在所有提醒的列表中，并且如果我将每个块更改为遍历model.reminders（原始DS.hasMany 属性，而不是排序和过滤属性）。即使我导航到包含所有提醒列表的路线，然后返回，它也不会在那里，直到刷新之后。

那么我怎样才能触发这个计算属性的重新渲染呢？

【问题讨论】：

也许 CP 没有看到属性更新。您可以尝试直接调用 notifyPropertyChange 以通知观察者（您的 CP）在您保存时该属性已更新。 emberjs.com/api/classes/…
您需要手动将新提醒添加到作业的reminders 集合中。

标签： ember.js ember-data

【解决方案1】：

确保您的reminder 模型中还有一个belongsTo('job')。如果那还没有完成这项工作，请在您的控制器中尝试以下操作：

export default Ember.Controller.extend({
    actions: {
        save() {
            this.get('model').save().then( (model) => {
                let target = model.get('target');
                this.get('store').find('job', model.get('job.id')).then((job) => {
                     job.get('reminders').pushObject(model);
                     this.transitionToRoute('dashboard.jobs.show.reminders', target)
                 });
              });
         }
       }
 });

【讨论】：