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?

Answers


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 -->

Need Your Help

Packager for packing html css js file to .exe

jquery internet-explorer sencha-touch package

Is there any packager available in market to package html, css, js file into some .exe.

Facebook page tab app only displaying to admins

facebook

I am having trouble with my Facebook page tab app.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.