Ember.js 如何解决defineProperty弃用错误？

我收到一个名为

DEPRECATION:[DEPRECATED]的错误，该错误未通过“defineProperty”[DEPRECATION id:ember meta.descriptor on object]

在对象上设置计算属性“value”并且我确实确定它希望我解析哪个资源文件。然而，我看到了与我收到的内容相关的关于弃用的文档，我发现了这一点

请给我一个如何解决它的例子，因为我有点困惑

这是我的密码

import TextField from '@ember/component/text-field';
import { computed } from '@ember/object';
import { reads } from '@ember/object/computed';

import FormControlMixin from 'bos-web/mixins/components/form/control';
import InFormGroupMixin from 'bos-web/mixins/components/form/in-form-group';

/**
 * @protected
 * @component
 * @class TextFormControl
 * @extends Ember.TextField
 * @mixes FormControlMixin
 * @mixes InFormGroupMixin
 */
export default TextField.extend(FormControlMixin, InFormGroupMixin, {
  /**
   * @public
   * @override
   * @property autocomplete
   * @type {string}
   */
  autocomplete: 'off',

  /**
   * @public
   * @override
   * @property classNameBindings
   * @type {string|Array<string>}
   */
  classNameBindings: ['textAlign', 'controlExtraClassNames'],
  /**
   * @public
   * @computed
   * @property textAlign
   * @type {string}
   */
  textAlign: computed('formGroup.textAlign', function() {
    let textAlign = this.get('formGroup.textAlign');

    switch (textAlign) {
      case 'right':
      case 'center':
        return `text-${textAlign}`;
      default:
        return '';
    }
  }),
  /**
   * @public
   * @computed
   * @property controlExtraClassNames
   * @type {Array}
   */
  controlExtraClassNames: reads('formGroup.controlExtraClassNames'),

  /**
   * @public
   * @computed
   * @property placeholder
   * @type {string}
   */
  placeholder: reads('formGroup.placeholder'),
  /**
   * @public
   * @computed
   * @property name
   * @type {string}
   */
  name: reads('formGroup.name'),
  /**
   * @public
   * @computed
   * @property required
   * @type {boolean}
   */
  required: reads('formGroup.required'),
  /**
   * @public
   * @computed
   * @property disabled
   * @type {boolean}
   */
  disabled: reads('formGroup.disabled'),
  /**
   * @public
   * @computed
   * @property autofocus
   * @type {boolean}
   */
  autofocus: reads('formGroup.autofocus'),
  /**
   * @public
   * @computed
   * @property type
   * @type {string}
   */
  type: reads('formGroup.type'),
  /**
   * @public
   * @computed
   * @property maxlength
   * @type {number}
   */
  maxlength: reads('formGroup.maxLength'),
  /**
   * @public
   * @computed
   * @property synchroniseOnReturn
   * @type {boolean}
   */
  synchroniseOnReturn: reads('formGroup.synchroniseOnReturn'),
  /**
   * @public
   * @computed
   * @property value
   * @type {string}
   */
  value: undefined,

  /**
   * @public
   * @override
   * @hook
   * @method init
   */
  init() {
    this._super();

    if (this.get('synchroniseOnReturn')) {
      this.value = computed('formGroup.value', {
        get() {
          return this.get('formGroup.value');
        },
        set(_, value) {
          value = this.trimValue(value);
          this.set('_value', value);

          return value;
        }
      });
    } else {
      this.value = computed('formGroup.value', {
        get() {
          return this.get('formGroup.value');
        },
        set(_, value) {
          value = this.trimValue(value);
          this.setFormGroupValue(value);

          return value;
        }
      });
    }
  },

  /**
   * @public
   * @method keyDown
   * @param {JQueryEven} e
   * @return {boolean} whether bubbling
   */
  keyDown(e) {
    if (this.get('synchroniseOnReturn') && e.keyCode === 27) {
      e.stopPropagation();

      this.set('value', this.get('formGroup.value'));

      return false;
    }
  },

  /**
   * @public
   * @method keyPress
   * @param {JQueryEvent} e
   * @return {boolean} whether bubbling
   */
  keyPress(e) {
    if (this.get('synchroniseOnReturn') && e.keyCode === 13) {
      e.stopPropagation();

      let value = this.get('_value');

      value = this.trimValue(value);
      this.setFormGroupValue(value);

      return false;
    }
  },

  /**
   * @public
   * @method focusIn
   * @param {JQueryEvent} e
   */
  focusIn(/*e*/) {
    this.$().select();
  },

  /**
   * @public
   * @method focusOut
   * @param {JQueryEvent} e
   */
  focusOut() {
    let synchroniseOnReturn = this.get('synchroniseOnReturn');
    let formGroupValue = this.get('formGroup.value');

    if (synchroniseOnReturn && this.get('_value') !== formGroupValue) {
      this.set('value', formGroupValue);
    }
  },

  /**
   * @public
   * @method change
   * @param {JQueryEvent} e
   */
  change() {
    let formGroup = this.get('formGroup');

    formGroup.sendAction('onChange', formGroup.get('model'));

    return true;
  }
});

从“@ember/component/text field”导入文本字段；
从'@ember/object'导入{computed}；
从“@ember/object/computed”导入{reads}；
从“bos web/mixins/components/form/control”导入FormControlMixin；
从“bos web/mixins/components/form/in form group”导入InFormGroupMixin；
/**
*@受保护
*@组件
*@class TextFormControl
*@extends Ember.TextField
*@mixes FormControlMixin
*@mixes informgrupmixin
*/
导出默认的TextField.extend（FormControlMixin、InFormGroupMixin、{
/**
*@公众
*@覆盖
*@属性自动完成
*@type{string}
*/
自动完成：“关闭”，
/**
*@公众
*@覆盖
*@property classNameBindings
*@type{string | Array}
*/
classNameBindings:['textAlign'，'controlExtraClassNames']，
/**
*@公众
*@计算
*@property textAlign
*@type{string}
*/
textAlign:computed（'formGroup.textAlign'，函数（）{
让textAlign=this.get（'formGroup.textAlign'）；
开关（文本对齐）{
案例“正确”：
案例“中心”：
返回'text-${textAlign}'；
违约：
返回“”；
}
}),
/**
*@公众
*@计算
*@property-controlExtraClassNames
*@type{Array}
*/
ControlExtrassNames:读取（'formGroup.ControlExtrassNames'），
/**
*@公众
*@计算
*@属性占位符
*@type{string}
*/
占位符：读取（'formGroup.placeholder'），
/**
*@公众
*@计算
*@property name
*@type{string}
*/
名称：读取（'formGroup.name'），
/**
*@公众
*@计算
*@需要属性
*@type{boolean}
*/
必需：读取（'formGroup.required'），
/**
*@公众
*@计算
*@属性已禁用
*@type{boolean}
*/
已禁用：读取（'formGroup.disabled'），
/**
*@公众
*@计算
*@property自动对焦
*@type{boolean}
*/
自动聚焦：读取（'formGroup.autofocus'），
/**
*@公众
*@计算
*@属性类型
*@type{string}
*/
类型：读取（'formGroup.type'），
/**
*@公众
*@计算
*@property maxlength
*@type{number}
*/
maxlength:读取（'formGroup.maxlength'），
/**
*@公众
*@计算
*@property返回
*@type{boolean}
*/
SynchronizeOnReturn:读取（'formGroup.SynchronizeOnReturn'），
/**
*@公众
*@计算
*@财产价值
*@type{string}
*/
值：未定义，
/**
*@公众
*@覆盖
*@hook
*@methodinit
*/
init（）{
这个；
if（this.get（'synchronizeOnReturn'））{
this.value=computed（'formGroup.value'{
得到（）{
返回此.get（'formGroup.value'）；
},
设置（ux，值）{
值=此.trimValue（值）；
此。设置（“U值”，值）；
返回值；
}
});
}否则{
this.value=computed（'formGroup.value'{
得到（）{
返回此.get（'formGroup.value'）；
},
设置（ux，值）{
值=此.trimValue（值）；
此.setFormGroupValue（值）；
返回值；
}
});
}
},
/**
*@公众
*@methodkeydown
*@param{JQueryEven}e
*@return{boolean}是否冒泡
*/
按键向下（e）{
if（this.get（'synchronizeOnReturn'）&&e.keyCode==27）{
e、 停止传播（）；
this.set（'value'，this.get（'formGroup.value'）；
返回false；
}
},
/**
*@公众
*@方法按键
*@param{JQueryEvent}e
*@return{boolean}是否冒泡
*/
按键（e）{
if（this.get（'synchronizeOnReturn'）&&e.keyCode==13）{
e、 停止传播（）；
让value=this.get（“u值”）；
值=此.trimValue（值）；
此.setFormGroupValue（值）；
返回false；
}
},
/**
*@公众
*@methodfocusin
*@param{JQueryEvent}e
*/
聚焦蛋白（/*e*/）{
这个。$（）.select（）；
},
/**
*@公众
*@methodfocusout
*@param{JQueryEvent}e
*/
focusOut（）{
让synchronizeonreturn=this.get（'synchronizeonreturn'）；
让formGroupValue=this.get（'formGroup.value'）；
if（synchronizeOnReturn&&this.get（“'u value'）！==formGroupValue）{
此.set（'value'，formGroupValue）；
}
},
/**
*@公众
*@方法更改
*@param{JQueryEvent}e
*/
更改（）{
让formGroup=this.get（'formGroup'）；
formGroup.sendAction（'onChange'，formGroup.get（'model'）；
返回true；
}
});

---

非常感谢您的回复。

问题在于init方法中的if-else语句。您希望动态定义计算属性“值”。这是不推荐的

折旧已添加到余烬3.2中。该代码一直工作到3.5。官方解释如下：

虽然不常见，但可以直接将计算属性指定给对象，并从egEmber.get隐式计算它们。作为支持ES5 getter计算属性的一部分，不推荐直接分配计算属性。您应该将这些分配替换为调用defineProperty

因此，在我看来，您有两种选择来修复此弃用：

1。使用@ember/object中的defineProperty

import { defineProperty } from '@ember/object';
...
if (this.get('synchroniseOnReturn')) {
  defineProperty(this, 'value', computed('formGroup.value', {
    get() {
      return this.get("formGroup.value");
    },
    set(_, value) {
      value = this.trimValue(value);
      this.set("_value", value);

      return value;
    }
  }));
} else {
  ...
}

2。重构代码并放弃动态创建计算属性“值”

---

您是否在

Ember.Object.extend

的上下文中定义

value

  value: computed('formGroup.value', {
    get() {
      return this.get("formGroup.value");
    },
    set(_, value) {
      value = this.trimValue(value);
      if (this.get("synchroniseOnReturn")) {
        this.set("_value", value);
      }
      else {
        this.setFormGroupValue(value);
      }

      return value;
    }
  }),
  ....