I have a view in Aurelia which has a Duet Date Picker in it. I created a component which just injects the Duet Datepicker into the page based on the element (template) passed to it. Here are the relevant code snippets:
setup-installment.html
<div>
<label for="nextPaymentDatepicker">Next Payment Date</label>
<duet-date-picker identifier="nextPaymentDatepicker"
value.bind="nextPaymentDate">
</duet-date-picker>
</div>
setup-installment.ts
import { autoinject, bindable } from 'aurelia-framework';
import * as moment from 'moment';
@autoinject
export class SetupInstallments {
@bindable nextPaymentDate: any;
// ... other bindings, etc
constructor() { /*...*/ }
validateNextPaymentDate() {
//this.nextPaymentDate is undefined here:
let date = moment(this.nextPaymentDate, 'YYYY-MM-DD');
}
duet-date-picker.html
<template>
</template>
The above only has <template>
tags just so that the tag <duet-date-picker>
is injected into the page (I know that this is a bit round-about, but it seemed to be the ‘Aurelia’ way of inserting a widget in a reusable manner). The actual datepicker itself is injected by defineCustomElements()
in the class below:
duet-date-picker.ts
import { bindable, inject } from 'aurelia-framework';
import { defineCustomElements } from '@duetds/date-picker/dist/loader';
/**
* Wrapper class for duet-date-picker (@duetds/date-picker)
*/
@inject(Element)
export class DuetDatePicker {
@bindable businessTimezone: any;
@bindable value: any;
element: any;
constructor(element) {
this.element = element;
}
attached() {
defineCustomElements(this.element); // injects picker
}
The Question:
The value from the <duet-date-picker>
section never seems to make it to nextPaymentDate
in the SetupInstallments
object. There ends up being both a value.bind
attribute as well as a value
attribute (the second of which is injected when defineCustomElements()
is run). Is there a recommended way of getting Aurelia to pick up on the second value
tag which is inserted?