CODEWITHSUNDEEP
typescriptbindingaurelia
Gaet
Gaet

Reputation: 689

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?

Upvotes: 0

Views: 245

Answers (2)

JayDi
JayDi

Reputation: 1067

You need to use property.bind or property.two-way (if you want data from view to model too) in view model like that:

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

Upvotes: 0

mgiesa
mgiesa

Reputation: 1013

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

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

Upvotes: 4

Related Questions