我有一个带有表格内容的 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();
});
}