Currently, I am developing an application using Aurelia. One part of the application features a grid that displays users along with their active status.
To allow for editing of the active state, I have implemented a slide button control, similar to those found in iOS. Sliding left indicates true and right indicates false.
I intend to integrate this control into my user grid so that users can easily enable or disable the user by clicking on the custom slide button. However, I need the control to update the row it is placed in with its value when changes are made.
An example of how this would look:
Imagine the table structure below
<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>
The current setup works well as the slide button defaults to the active status of the user.
However, when the slide button is changed, I would like the row to be notified somehow so that I can trigger updates to the backend and modify the status.
I have considered passing the user id to the custom component like so:
<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td>
Although, I prefer if the control does not make the call itself or limit its use in other scenarios, such as different grids with toggle-able elements.
Initially, I thought about implementing an event-driven solution. However, considering a table with potentially over 500 rows, managing events from numerous slide buttons did not seem feasible.
If there is a way to reflect the value back into the attribute, that would be beneficial. Ideally, I would like the custom control to directly update the underlying view model of the row.