Knockout Menu 绑定切换视图和更改 css答案

【问题标题】：Knockout Menu binding switch view and change cssKnockout Menu 绑定切换视图和更改 css
【发布时间】：2019-04-15 07:54:33
【问题描述】：

我有一个使用敲除/jquery 编写的单页应用程序。但是，我正在努力寻找一种更好的方法来处理要显示的视图。由于我需要更多菜单项，您可以看到代码将如何更难以管理。我希望能够根据选择的内容显示视图并更改 CSS，以便您也可以看到选择了哪个选项卡。

  <div class="col-md-2 sidebar">
        <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active" data-bind="click: ShowDashboard, css: DashboardSideBarCss">
                Dashboard
            </a>
            <a href="#" class="list-group-item list-group-item-action non-active-sidebar"
               data-bind="click: ShowCompanyDetails, css: CompanyDetailsSideBarCss">
                Company Details
            </a>
            <a href="#" class="list-group-item list-group-item-action non-active-sidebar"
               data-bind="click: ShowEmployees, css: EmployeesSideBarCss">
                Employees
            </a>
            <a href="#" class="list-group-item list-group-item-action non-active-sidebar"
               data-bind="click: ShowEtc, css: EtcCss">
                etc....
            </a>
        </div>

    </div>

【问题讨论】：

标签： javascript jquery knockout.js bootstrap-4 knockout-3.0

【解决方案1】：

对视图更改链接使用单个类/单击并添加一个包含视图“键”的新属性，例如：

<a href="#" data-view="dashboard" data-bind="click: changeContent">

在您的 changeContent 函数中读取属性并将其设置为新的可观察对象，例如“currentView”

某事。喜欢：

vm.currentView($(this).attr('data-viewkey'))

（或者你习惯编码）

然后您可以只显示正确的内容，例如：

<div style="display:none" data-bind="visible:vm.currentView()=='dashboard'" >
....

或者你可以切换一个'activeclass'

data-bind="attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"

或添加单独的动态选择器

 data-bind="attr:{class:'content_'+vm.currentView()}"

tl;dr 引入了一个新的 observable，它持有一个“viewkey”，一切都基于它，你可以做任何你想做的事情

【讨论】：