Edit Row

Explanation #

This example shows how to implement editable rows. First let’s look at the row prior to editing:

1<tr>
2    <td>Joe Smith</td>
3    <td>[email protected]</td>
4    <td>
5        <button data-on-click="@get('/examples/edit_row/0')">
6            Edit
7        </button>
8    </td>
9</tr>

This will trigger a whole table replacement as we are going to remove the edit buttons from other rows as well as change out the inputs to allow editing.

Finally, here is what the row looks like when the data is being edited:

 1<tr>
 2    <td>
 3        <input type="text" data-bind-name>
 4    </td>
 5    <td>
 6        <input type="text" data-bind-email>
 7    </td>
 8    <td>
 9        <button data-on-click="@get('/examples/edit_row/cancel')">
10            Cancel
11        </button>
12        <button data-on-click="@patch('/examples/edit_row/0')">
13            Save
14        </button>
15    </td>
16</tr>

Here we have a few things going on, clicking the cancel button will bring back the read-only version of the row. Finally, there is a save button that issues a PATCH to update the contact.