无法从外部访问 ember-pikaday onSelection 中的日期

Can't access date in ember-pikaday onSelection from the outside

你们中有人使用 ember-pikaday 插件遇到过这种情况吗?我想将 onSelection 中的日期设置为存储在 selectedDate 中,但是 onSelection 中的上下文是插件的,而不是组件本身的。有没有一种方法可以将 date 的值存储到组件中的一个属性?

我的代码是这样的:

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['schedule-nav-date-picker'],
  selectedDate: null,

  onSelection: function(date) {
    this.set('selectedDate', date);
    return date;
  },

  actions: {
    saveClicked () {
        this.sendAction('saveClicked', this.get('selectedDate'));
    },

    cancelClicked () {
      this.sendAction('cancelClicked');
    }

  }
});

它给了我这个错误:

pikaday.js:165 Uncaught TypeError: this.get(...) is not a function
at Class.userSelectedDate (pikaday.js:165)
at Class.onPikadaySelect (pikaday.js:151)
at Backburner.run (ember.debug.js:224)
at Backburner.join (ember.debug.js:247)
at Function.run.join (ember.debug.js:15904)
at Pikaday.<anonymous> (ember.debug.js:15966)
at Pikaday.setDate (pikaday.js:815)
at HTMLDivElement.Pikaday.self._onMouseDown (pikaday.js:462)

这是模板,(我们使用 Emblem 作为模板):

h1 Select a Date
.form-groups-container.-include-container
  .form-section
    .form-group
      .row
        pikaday-inputless onSelection=onSelection

form-buttons [
  saveLabel='Save'
  cancelLabel='Cancel'
  saveClicked='saveClicked'
  cancelClicked='cancelClicked' ]

使用 action 助手的主要好处之一是它会自动为您准备 this 上下文;当你使用它时。例如,如果您在没有像 {{pikaday-inputless onSelection=onSelection}} 这样的操作助手的情况下传递函数 onSelection,那么 "this context" 将是 pikaday-inputless 组件,而不是处理函数中您自己的组件(父组件) onSelection。这就是 kumkanillam 在此评论中已经提到的内容。所以你需要使用pikaday-inputless onSelection=(action 'onSelection') for "this context"作为你自己的组件。

我已经准备了一个非常简单的twiddle给你来说明使用action helper是如何顺利进行的。您只需要将操作处理程序放在组件的 actions json 声明中。查看 my-component 中的 twiddle。它只是做了我上面已经总结过的事情。希望这有帮助。