表形式のコンテンツを含む SPA Web アプリケーションがあります。各タブのコンテンツは、ユーザーがメニューから選択した内容に基づいてロードする必要があります。たとえば、ユーザーが顧客リストをクリックした場合、タブはそのコンテナーに追加され、コンテンツは顧客ビューのリストである必要があります。コンテンツをページや部分ビューにバインドする方法を知りたいです。
アップデート
これが私のタブマークアップです
<div class="tabbable span9" data-bind="with: tabs, visible: tabs().length > 0">
<ul class="nav nav-tabs" data-bind="foreach: $data">
<li data-bind="css: { active: isActive() > 0 }">
<a data-toggle="tab" data-bind="text: title(), attr: { href: tabUrl() } "></a>
</li>
</ul>
<div class="tab-content" data-bind="foreach: $data">
<div class="tab-pane" data-bind="attr: { id: uid(), }, css: { active: isActive() > 0 }">
<p data-bind="text: title()"></p>
</div>
</div>
これが私のビューモデルです:
// add tab to tab container
self.addTab = function (id, type, title, isActive) {
self.tabs.push(new uitab(id, type, title, isActive));
};
そして最後に、これは私のタブモデルです:
function uitab(id, type, title, isactive) {
var self = this;
self.tabType = ko.observable(type);
self.id = ko.observable(id);
self.title = ko.observable(title);
self.isActive = ko.observable(isactive);
self.uid = ko.observable(token());
self.tabUrl = ko.computed(function () {
return '#'+self.uid();
});
}