Knockout.js foreach повторяет элемент td в таблице, но не элемент tr

У меня есть следующая выдержка из таблицы, которую я использую для отображения большого количества файлов, полученных с сервера, с использованием MVC 4 и библиотеки knockout.js версии 2.1.0.

    <tr data-bind="foreach: files, visible: (files() && files().length > 0)">
        <td data-bind="text: UploadPath" />
        <td data-bind="text: FileName" />
    </tr>

Данные извлекаются правильно, однако foreach повторяет TD-элементы в таблице, а не TR. Поэтому, если есть 100 файлов, в таблице, отображаемой пользователю, будет 200 столбцов. Как заставить элемент TR повторить foreach файл?

Ответы

Ответ 1

Просто поставьте привязку "foreach" в следующем (внешнем) элементе:

<table data-bind="foreach: files, ...">
    <tr>
        ...

Вы также можете использовать виртуальный элемент:

<!-- ko foreach: files -->
<tr>
    <td>
        ...
</tr>
<!-- /ko -->

Ответ 2

Я наткнулся на странную вещь:

Я пытался использовать привязку к контейнеру для повторения нескольких строк таблицы. KO жаловалась, что не может найти тег закрытия /ko.

У меня был заголовок таблицы, определенный выше привязки без контейнера. Если бы я изменил это на стандартную строку таблицы, все работало как ожидалось (кроме моего заголовка не было требуемого стиля, но я переопределяю это).

Надеюсь, это поможет кому-то, кто борется с этим - это всего лишь обходное решение, а не исправление.