My custom element wont display bind context values in the aurelia-bootstrap typeahead fields even though the bind.context has values for those fields… Further, if I set the values through a fetch it works and displays. Is it the way I manually set the value? I dont know. I have provided as much detail as I can to add context to the problem…
My custom element is called and bound in the parent html as follows:
<address address.bind="address"></address>
The aurelia-bootstrap typeaheads do not display the bind context when I manually set them but do if the context is set via a fetch. (shown further below)
When I manually set the context values the typeaheads are empty, the text fields show the values but when I access the suburb dropdown fetch it requires a state value and so I know it the state has a value. Here is a picture of the address custom element and further an inspection on the state field showing the aurelia context…
The address object is an instantiated class object:
export class AddressDetails implements Serializable<AddressDetails> {
address1?: string;
address2?: string;
addressLocation: AddressLocation;
deserialize(input) {
this.address1 = input.address1;
this.address2 = input.address2;
if (input.addressLocation) {
this.addressLocation = new AddressLocation;
this.addressLocation.deserialize(input.addressLocation);
}
return this;
}
}
AddressLocation is also a class object:
export class AddressLocation implements Serializable<AddressLocation> {
addressLocationId?: number;
suburb?: string;
postcode?: string;
stateShortName?: string;
deserialize(input) {
this.addressLocationId = input.addressLocationId;
this.suburb = input.suburb;
this.postcode = input.postcode;
this.stateShortName = input.stateShortName;
return this;
}
}
So this is the structure of address and it works. No problem. When I am displaying a client from a “fetch” with this custom address element it works swimmingly! Displays the values in all five text boxes and I can drop down the state and the suburb.
However when I try and set the state textbox with the state “VIC” it will not display this in the textbox but the binding context shows that the state, and for that matter the suburb - also a typeahead - doesnt display the value in the textbox.
Here is the viewmodel for address where I set the value…
activate(parms, routeConfig) {
this.hasClientId = parms.id;
if (this.hasClientId) {
const headers = this.authService.header();
// Lets do a fetch!
fetch("/api/Client/editClient/" + parms.id, {
method: "GET",
headers
})
.then(response => response.json())
.then(data => {
console.log("DATA: ", data);
this.client.deserialize(data);
this.address.deserialize(data.address)
this.originalClient.deserialize(data);
})
console.log('CLIENT.ADDRESS: ', this.address)
this.heading = "Edit Client"; // An id was submitted in the route so we change the heading as well.
this.headingIcon = "fa-pencil-square-o";
} else {
// HERE IS WHERE I SET THE BIND CONTEXT FOR STATE AND SUBURB AND IT DOESNT DISPLAY.
// IT DISPLAYS THE VALUES FOR ADDRESS1 AND POSTCODE WHICH ARE NOT TYPEAHEAD TEXTBOXES
console.log("CLIENT BEFORE: ", this.address)
const headers = this.authService.header();
this.address.deserialize(
{
address1: "test",
addressLocation: { addressLocationId: 7929, suburb: "Earlston", postcode: "3669", stateShortName: "VIC" }
}
);
console.log("CLIENT AFTER: ", this.address)
// Lets do a fetch!
}
return null;
}
Note that the fetch works but when it finds “this.hasClientId” empty moves to the other “if” option. It here that while its set using “deserialize” method it wont display.
I am using “aurelia-bootstrap” for the typeahead.