无法从外部访问 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。它只是做了我上面已经总结过的事情。希望这有帮助。
你们中有人使用 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。它只是做了我上面已经总结过的事情。希望这有帮助。