Now we will take our budget form just one step further. We will combine a number of the features we have been learning to this point into an editable grid. We will wrap the grid in a form this time also, but you will see in the code a dual option for how you use the form. Create a file called grid.html for this example. Enter the following in the markup:
<form action='/serverTargetHandlerHere'>
<p>You have asked for <span data-bind='text: budget().length'> </span> budget item(s)</p>
<table data-bind='visible: budget().length > 0'>
<thead>
<tr>
<th>Budget</th>
<th>Amount</th>
<th/>
</tr>
</thead>
<tbody data-bind='foreach: budget'>
<tr>
<td><input data-bind='value: name, uniqueName: true' /></td>
<td><input data-bind='value: amount, uniqueName: true' /></td>...