How to do Foreach Binding using knockout js
Posted By : Rajan Rawat | 12-Dec-2016
FOREACH BINDING
Getting started
In the next few minutes you'll build a dynamic UI for reserving seats and meals — this could be one step in an airline booking process. In the bottom-right pane, you've already got:
SeatReservation, a simple JavaScript class constructor that stores a passenger name with a meal selection
ReservationsViewModel, a viewmodel class that holds:
availableMeals, a JavaScript object that provides the meal data
seats, an array holding an collection of SeatReservation instances. Note that it's a ko.observableArray - not surprisingly, that's the observable equivalent of a regular array, THAT means it can automatically trigger UI update whenever item are added or removed from the list.
The view (top-right pane) doesn't yet display the reservation data, so let's fix that. Update the <tbody> element to use the foreach binding, so that it will render a copy of its child elements for each entry in the seats array:
Notice that, because the meal property is an observable, it's important to invoke meal as a function (to obtain the current value) before attempting it to read sub-properties. In other words, write meal().price, not meal.price.
The result? If you run the application now, you should see a simple table of seat reservation information.
foreach is part of a family of control flow bindings that includes foreach, if, ifnot, and with. That make it these things possible to construct any kind of iterative or conditional or nested UI based on a dynamic viewmodel.
HTML CODE
<table> <thead> <tr><th>First name</th><th>Last name</th></tr> </thead> <tbody data-bind="foreach: people"> <tr> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> </tr> </tbody></table><script type="text/javascript"> ko.applyBindings({ people: [ { firstName: 'Bert', lastName: 'Bertington' }, { firstName: 'Charles', lastName: 'Charlesforth' }, { firstName: 'Denise', lastName: 'Dentiste' } ] });</script>
OUTPUT
People
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rajan Rawat
Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.