Knockout JS - вкладки в пользовательском элементе управления не форматируются

Я углубился в детали, поэтому уверен, что знаю правильный вопрос - давайте посмотрим, как я справился.

У меня есть одностраничное приложение, использующее Knockout 3.4.0. Главная страница с рядом прикрепленных пользовательских элементов управления. У меня есть набор вкладок, определенный на главной странице, и он отлично работает:

    <div class = "newportal documentsView" id = "documentsView">
        <div class = "tabs">
            <ul data-bind = "foreach: tabs">
                <li><a data-bind = "attr: { href: '#tab-' + name }, css: { selected: $root.currentTab() == $data }, click: $root.updateTab, text: name"></a></li>
            </ul>
            <!-- ko foreach: tabs -->
            <div class = "area" data-bind = "attr: { id: 'tab-' + name }, template: { name: template, data: $data.model().viewModel }">
            </div>
            <!-- /ko -->
        </div>
    </div>

У меня есть второй набор вкладок, определенных на одном из элементов управления, в котором хранится содержимое одной из этих верхних вкладок. Код почти идентичен верхнему, за исключением ссылки на разные данные:

РЕДАКТИРОВАТЬ - повторяющиеся идентификаторы и имена тегов изменены по предложению комментатора - без изменений формата или функциональности.

        <div class = "newportal documentsView" id = "bulkDocumentsView">
            Welcome to Bulk Documents
            <div class = "tabs">
                <ul data-bind = "foreach: bulktabs">
                    <li><a data-bind = "attr: { href: '#bulktab-' + name }, css: { selected: $root.currentBulkTab() == $data }, click: $root.updateBulkTab, text: name"></a>
                        <!-- ko if: $root.currentBulkTab() == $data -->
                        (*)
            <!-- /ko -->

                    </li>
                </ul>
                <!-- ko foreach: bulktabs -->
                <!-- ko if: $root.currentBulkTab() == $data -->
                <div class = "area" data-bind = "attr: { id: 'bulktab-' + name }, template: { name: template, data: $data.model().viewModel }">
                </div>
                <!-- /ko -->
                <!-- /ko -->
            </div>
        </div>
    </div>

Здесь есть условные выражения "$ root.currentBulkTab", поэтому я могу подтвердить, что ссылки правильно содержат правильный выбранный тег и правильно "подсвечиваются" - они есть и есть.

Однако последняя страница форматирует только верхний набор как вкладки, второй набор отображается как неформатированный набор пользовательского интерфейса:

Функциональность правильная - отображение правильной выбранной страницы и т. д. Если у меня нет второго условного ko для раздела шаблона, он отображает все три, еще одна вещь, которая, я считаю, должна очиститься, когда форматирование вкладки будет применено правильно.

Используемый файл css - jquery-ui-1.10.3.custom.css - я могу закомментировать файл, и верхний набор вкладок имитирует поведение второго.

Ясно, что есть какая-то дополнительная ссылка или тег, который мне нужно нажать, чтобы данные на подстранице были правильно отформатированы, но я не знаю, что это такое. Можно ли иметь только один набор вкладок на странице, и это должен быть какой-то «набор вкладок», о котором я не знаю?

Я предполагаю, что стили должны проходить последовательно (слово «каскад» является частью их названия), но работают ли они по-другому?

Мысли?