Gaet Gaet - 1 month ago 6
TypeScript Question

How to have a complex binding in Aurelia?

Edited for typo

I'm currently trying to get the grips of Aurelia (aurelia.io). It's quite nice so far and overall, I like it but I'm stuck on trying to bind a custom component to the property of a VM.

My VM (YardMap.ts) has a property that is an array of objects:

export class YardMap {
...
locationsData:LocationModel[];
...
}


The corresponding view (YardMap.html) uses a component to which I'd like to be able to pass the data from the VM:

<template>
<require from="./resources/map-viewer"></require>
...
<map-viewer id="mapWrapper" class="threeContainer" locationsData.bind="locationsData"></map-viewer>
...
</template>


And finally, my component itself (map-viewer.ts) has a bindable property of the same type as the one from the VM and a propertychanged handler:

@noView()
export class MapViewer {
@bindable locationsData:LocationModel[] = [];

locationsDataChanged(newValue:LocationModel[]){
console.log(newValue.length);
}
}


This last method never gets called. If my property was a primitive, it would work easily but if it's an object or an array of objects, I can't seem to have the binding working.

Any idea?

Answer

Write locations-data instead of locationsData in the view, like this:

<map-viewer id="mapWrapper" class="threeContainer" locations-data.bind="locationsData"></map-viewer>
Comments