Has any of you experienced this using the ember-pikaday addon? I would like to set the date from the onSelection
to be stored on the selectedDate
but the context inside the onSelection is of the addon and not of the component itself. Is there a way I could store the value of date
to one of the properties in my component?
My code is like this:
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');
}
}
});
And it gives me this error:
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)
And this is the template, (we use Emblem for templating):
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' ]
One of the main benefits of using action
helper is that it automatically prepares this
context for you; when you use it. For instance if you pass the function onSelection
without the action helper like {{pikaday-inputless onSelection=onSelection}}
then "this context" will be the pikaday-inputless
component not your own component (parent component) within the handler function onSelection
. This is what kumkanillam already mentioned in this comment. So you need to use pikaday-inputless onSelection=(action 'onSelection')
for "this context" to be your own component.
I have prepared a very simple twiddle for you to illustrate that using action helper works smoothly. You just need to put your action handler within actions
json declaration of your component. Check out my-component
in the twiddle. It simply does what I already summarized above. Hope this helps.