foreach binding repeat section written inside it. This is useful to rendering table , lists,
Firstly, we will check with static array then we will go dynamic.
1 . Simple Foreach:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> </head> <body> <table> <tr data-bind="foreach: employeeTableHead "> <th data-bind="text: $data"></th> </tr> <tbody data-bind="foreach: employeeList"> <tr> <td data-bind="text: name"></td> <td data-bind="text: age"></td> <td data-bind="text: currency"></td> <td data-bind="text: salary"></td> </tr> </tbody> </table> <script type="text/javascript"> var viewModel = { employeeList: ko.observableArray([ {'name': 'Alex','age':28,'currency':'$','salary':4500}, {'name': 'Robert','age':30,'currency':'Euro','salary':4000}, {'name': 'Jospeh','age':25,'currency':'INR','salary':25000} ]), employeeTableHead: ko.observableArray(['Name','Age','Currency','Salary']) /// Or // employeeTableHead: ko.observable(['Name','Age','Currency','Salary']) }; ko.applyBindings(viewModel); </script> </body> </html> |
For array need to use observableArray instead of observable.
If we break this on table header we have used simple array access without key and on table data <td/> used key value pair for this.
If not using key value pair and need to access value of array use $data.
|
1 |
$data context is variable refer to current context in nested loops. |
Next array is employeeList with key pair values. To access values inside loop directly with key.
|
1 |
<td data-bind="text: name"></td> |
Another way to render employeeList array is using $data context as we know it refer to current context.
|
1 2 3 4 5 6 |
<tr> <td data-bind="text: $data.name"></td> <td data-bind="text: $data.age"></td> <td data-bind="text: $data.currency"></td> <td data-bind="text: $data.salary"></td> </tr> |
2. Using ‘as’ to provide alias to “foreach” items
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script> </head> <body> <table> <tr data-bind="foreach: employeeTableHead "> <th data-bind="text: $data"></th> </tr> <tbody data-bind="foreach:{data : employeeList, as : 'employeeArr' }"> <tr> <td data-bind="text: employeeArr.department"></td> </tr> <tr data-bind="foreach:{data : employees, as : 'employeeList' }"> <td data-bind="text: employeeList.name"></td> <td data-bind="text: employeeList.age"></td> <td data-bind="text: employeeList.currency"></td> <td data-bind="text: employeeList.salary"></td> </tr> </tbody> </table> <script type="text/javascript"> var viewModel = { employeeList: ko.observableArray([ { 'department':'Software', employees:[ {'name': 'Alex','age':28,'currency':'$','salary':4500}, {'name': 'Robert','age':30,'currency':'Euro','salary':4000}, {'name': 'Jospeh','age':25,'currency':'INR','salary':25000} ] }, { 'department':'HR', employees:[ {'name': 'Julian','age':22,'currency':'$','salary':5000}, {'name': 'Courtery','age':30,'currency':'Euro','salary':7000}, ] } ]), employeeTableHead: ko.observableArray(['Name','Age','Currency','Salary']) /// Or // employeeTableHead: ko.observable(['Name','Age','Currency','Salary']) }; ko.applyBindings(viewModel); </script> </body> </html> |