ember.js - Ember 组件 : A property of X was modified inside the didInsertElement hook deprecation, 该集合应该去哪里？

Question

完整的弃用消息是 DEPRECATION: A property of <orders-app@view:test-holder::ember3010> was modified inside the didInsertElement hook. You should never change properties on components, services or models during didInsertElement because it causes significant performance degradation.

为了简化场景，假设我们有一个带有输入框的组件，我们希望将文本框日期设置为今天加上天数 numberOfDays 。因此，如果今天是 2015 年 1 月 3 日并且 numberOfDays=2那么文本框值应该是 05-01-2015 (假设我们想要 DD-MM-YYYY 格式)。所以我们的设置可以是:

日期淋浴.hbs

{{input type="text" value=dateInput}}

组件/date-shower.js

export default Ember.Component.extend({
  didInsertElement: function() {
    var numberOfDays = this.get('numberOfDays');
    var dayToUse = new Date(); // today
    dayToUse.setDate(dayToUse.getDate() + numberOfDays);

    this.set('dateInput', moment(nextDay).format('DD-MM-YYYY'));
  }
});

然后我们可以将其与类似的东西一起使用

{{date-shower numberOfDays=2}}

当组件根据传递给它的属性计算其属性本身的默认值是有意义的时，我应该使用什么钩子(Hook)而不是 didInsertElement 来防止弃用消息？

Answer 1

我会将 dateInput 设置为组件上的一个计算属性，并让 Ember 为您处理该属性的设置，以确保它在正确的时间发生:

import Ember from 'ember';

const { Component, computed } = Ember;

export default Component.extend({
  didInsertElement() {
    // nothing needed in here
  },

  dateInput: computed('numberOfDays', function() {
    let numberOfDays = this.get('numberOfDays');
    let dayToUse = new Date(); // today

    dayToUse.setDate(dayToUse.getDate() + numberOfDays);

    return moment(nextDay).format('DD-MM-YYYY');
  })
});

这样，一旦 numberOfDays 可用，您的 dateInput 值就会被计算。