Gaet Gaet - 1 year ago 71
TypeScript Question

How to have a complex binding in Aurelia?

Edited for typo

I'm currently trying to get the grips of Aurelia ( 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 {

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

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

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:

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


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 Source

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

<map-viewer id="mapWrapper" class="threeContainer" locations-data.bind="locationsData"></map-viewer>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download