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

时间:2013-10-22 15:15:36

标签: asp.net-mvc knockout.js single-page-application

我有一个带有表格内容的SPA网络应用程序。应根据用户从菜单中选择的内容加载每个标签内容。例如,如果用户单击了客户列表,则应将选项卡添加到其容器中,并且内容应该是客户视图列表。我想知道如何将内容绑定到页面和/或部分视图。

更新

这是我的标签标记

<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();
    });
}

1 个答案:

答案 0 :(得分:1)

此类情况的解决方案是使用template-binding