knockout.js foreach repeats td element in table, but not the tr element
I have the following excerpt from a table that I'm using to display a lit of files retrieved from a server, using MVC 4 and the knockout.js library version 2.1.0.
<tr data-bind="foreach: files, visible: (files() && files().length > 0)"> <td data-bind="text: UploadPath" /> <td data-bind="text: FileName" /> </tr>
The data is being retrieved properly, however foreach is repeating the TD elements in the table and not the TR. So if there are 100 files, there will be 200 columns in the table displayed to the user. How do I make the TR element repeat foreach file?
Simply put the "foreach" binding in the next (outer) element:
<table data-bind="foreach: files, ..."> <tr> ...
You can also utilize a virtual element:
<!-- ko foreach: files --> <tr> <td> ... </tr> <!-- /ko -->