javascript - KnockoutJS 使用 Bindig 更改 View

Question

我想使用knockout js api显示和隐藏选定的 View 。我的 View 模型是这样的。

var profileModel = {
    first: ko.observable("First name"),
    last: ko.observable("Last name"),
};

var settingsModel = {
    isActive: ko.observable(true)        
};

var notificationsModel = {
    emailAddress: ko.observable("sample@mail.net")  
};

我有一个 shell viewmodel 来管理子 viewmodel:

var shellModel = {
    sections: ["profile", "settings", "notifications"],
    selectedSection: ko.observable(),   
}
ko.applyBindings(shellModel);

我的导航 View 如下所示:

<ul data-bind="foreach: sections">
   <li>
        <a href="#" data-bind="click: $root.selectedSection, text: $data"></a>
   </li>
</ul>

当用户单击此链接时，应显示所选 View ，而其他 View 不应显示。

个人资料 View 是这样的。

<div data-bind="with: ???">
    <div id="profile">
        <input data-bind="value: first" />
        <input data-bind="value: last" />
    </div>
    <button data-bind:"click: ???">Close</button>
</div>

Answer 1

在每个 View 模型中创建关闭函数，单击此函数将显示默认 View 或主视图并隐藏当前 View 。

var profileModel = {
 first: ko.observable("Bob"),
 last: ko.observable("Smith"),
 closeit: function () {
    shellModel.selectedSection("default");
 }
};

关闭按钮绑定(bind):-

 <input type="button" data-bind="click: closeit" value="close" />

然后默认 View :-

<div data-bind="visible: selectedSection() === 'default'">
    <div id="default">
        <div>Home page</div>
    </div>
</div>

Fiddle Demo