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格式化）。所以我们的设置可能是：

日期shower.hbs

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

部件/日期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}}

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

Answer 1

我会在组件上使<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> var currentLoadingPanel = null; var currentUpdatedControl = null; var btn1 = $find("<%= btnsave.ClientID%>"); function requestStart(sender, args) { currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>"); btn1 = $find("<%= btnsave.ClientID%>"); if (args.get_eventTarget() == "<%= btnsave.UniqueID %>") { currentUpdatedControl = "<%= importprocess.ClientID %>"; //show the loading panel over the updated control currentLoadingPanel.show(currentUpdatedControl); } } function responseEnd() { //hide the loading panel and clean up the global variables if (currentLoadingPanel != null) { currentLoadingPanel.hide(currentUpdatedControl); } currentUpdatedControl = null; currentLoadingPanel = null; } </script> </telerik:RadCodeBlock> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="btnstart"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="importprocess" /> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="btnsave"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="btnsave" ></telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> <ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd"></ClientEvents> </telerik:RadAjaxManager>成为计算属性，让Ember处理为您设置属性以确保它在合适的时间发生：

dateInput

这样，只要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'); }) });可用，就会计算出dateInput值。

Answer 2

您将需要使用计算属性来处理设置和获取dateInput，其中包括以下内容：

dateInputHandler: computed('numberOfDays', {
  set(key, val) {
    if (val) {
      this.set('dateInput', val);
    } else {
      this.set('dateInput', null);
    }
    return val;
  },
  get() {
    let dateInput = this.get('dateInput');
    if (!dateInput) {
      let numberOfDays = this.get('numberOfDays');
      let dayToUse = new Date(); // today
      dateInput = dayToUse.setDate(dayToUse.getDate() + numberOfDays);
      this.set('dateInput', dateInput);
    }
    return dateInput;
  }
})

在您的模板中，您将使用value=dateInputHandler

Ember组件：在didInsertElement钩子弃用中修改了X的属性，该组应该放在哪里？

2 个答案: