根据某些条件使用敲除加载页面

Question

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

Answer 1

这种情况的解决方案是使用template-binding。