O'Reilly logo

KnockoutJS Web Development by John Farrar

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Grid forms

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'>&nbsp;</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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required