typescript - Is it possible to have Aurelia components feed values back to their parents -

i'm creating application using aurelia, , in part of application have grid lists users, , users active status.

to allow active state edited i've created slide button control (similar seen in ios) where, sliding left true, , right false.

what i'd use control in user grid, people using it, can click on custom slide button enable/disable user, need control feed it's value when changes row it's placed in.

something this:

imagine table looks this

<table>   <thead>      <tr>       <th>id</th>       <th>name</th>       <th>email</th>       <th>is active?</th>     </tr>   </thead>   <tbody>     <tr repeat.for="user of userlist">       <td>${user.id}</td>       <td>${user.name}</td>       <td>${user.email}</td>       <td><slidebutton active="${user.active}"></slidebutton></td>     </tr>   </tbody> </table> 

this works great in slide button gets set default value based on active status of user expected.

however when slide button changed, row notified in someway, can tell update end , change status.

i'm not against passing in user id custom component eg:

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td> 

but i'd rather not have control make call, or doing prevents me using in other places, such on other grids might have different items of toggle-able information.

i had thought of event based way of doing it, looked @ 1 of user tables , saw there potential table on 500 rows in it, , tracking/managing 500 events 500 slide buttons didn't seem i'd particularly want do.

if there's way of reflecting value attribute, think great start, i'd if @ possible, custom control directly change underlying view model on row if @ possible.

you can set two-way databinding. first off, should switch on using .bind syntax instead of using string interpolation pass values in. because using string interpolation convert values strings, while .bind syntax can preserve type of whatever passing in. works binding in objects , such.

 <td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td> 

we can change .bind .two-way in example code above, , tell aurelia these bindings need two-way. accomplish want, annoying have this:

 <td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td> 

note set active property two-way databound, i'm guessing uid property isn't changed inside slidebutton control, , there's no need 2 way databinding on it.

but can set default two-way databinding. let's @ how this. i'm sure you've created bindable properties active , uid in slidebutton custom element. i'm betting (in esnext):

 @bindable active;  @bindable uid; 

if add bit of configuration these, can set these properties default two-way databinding, , you'll two-way databinding seek default.

 @bindable({ defaultbindingmode: bindingmode.twoway }) active;  @bindable uid; 

note i'm using bindingmode.twoway above. you'll need import enum aurelia-framework module. thus, might have following line @ top of slidebutton's view model file:

 import {bindable, bindingmode} 'aurelia-framework'; 

once you've done this, can go using active.bind="user.active" , aurelia handle two-way databinding you.