你们有没有使用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
上下文。当您使用它时。例如,如果在没有动作帮助程序(例如onSelection
)的情况下传递函数{{pikaday-inputless onSelection=onSelection}}
,则“此上下文”将是pikaday-inputless
组件,而不是处理程序函数onSelection
中的您自己的组件(父组件)。这是此评论中已经提到的kumkanillam。因此,您需要对使用pikaday-inputless onSelection=(action 'onSelection')
作为自己的组件。
我为您准备了一个非常简单的twiddle,以说明使用动作帮助程序可以顺利进行。您只需要将动作处理程序放入组件的actions
json声明中即可。在旋转中查看my-component
。它只是做了我上面已经总结的事情。希望这可以帮助。