Ember：计算属性中未检测到模型的属性更改

Question

我有 2 个模型。

models/calendar.js

export default Model.extend({
  holidays: hasMany('holiday'),
  date: attr(),
  occasion: attr()
})

models/holiday.js

export default Model.extend({
  calendar: belongsTo('calendar')
})

还有一个组件。

假期/component.js

export default Component.extend({
  init() {
    this._super(...arguments);
    this.store.find('calendar', this.get('calendarId'))
      .then(calendar => this.set('calendar', calendar));
  },

  calendarIsDirty: computed('calendar.holidays.@each.{date,occasion}', function () {
    // This is not executed
  })
})

假期/template.hbs

{{each calendar.holidays as |holiday|}}
  {{input value=holiday.date}}
  {{input value=holiday.occasion}}
{{/each}}

{{#if calendarIsDirty}}
  <button>Save</button>
{{/if}}

我在 UI 中显示假期，当用户编辑假期的日期或场合时，我想做一些事情。但是侦听这些更改的计算属性根本不会执行。请帮我解决这个问题。

我有一个“添加假期”按钮，用于添加用户可以编辑的空假期。当我添加假期时，会执行该计算属性。只有当我对现有假期进行更改时，才会执行计算的属性。

Answer 1

您的问题很简单，假设this.store.findAll('calendar') 返回单个calendar，但它返回calendars 的列表。

因此：this.set('calendar', calendar) 你将calendar 设置为calendars 的数组。

接下来你的依赖键 calendar.holidays.@each 是错误的，因为 calendar 是一个数组，因此没有属性 holidays。

如果你想要一个calendar，你应该做一个findId 或queryRecord。如果您想要一组日历，您应该相应地更改您的代码。但是，您需要知道 foo.@each.bar.@each 不是有效的依赖项密钥 - 这是 ember 的限制。你需要解决这个问题。