Javascript 淘汰菜单绑定切换视图和更改css
我有一个使用knockout/jquery编写的单页应用程序。然而,我正在努力寻找更好的方法来处理要显示的视图。由于我需要更多的菜单项,您可以看到代码将如何变得更加难以管理。我想能够显示一个基于所选内容的视图,并更改CSS,以便您可以看到哪个选项卡也被选中Javascript 淘汰菜单绑定切换视图和更改css,javascript,jquery,knockout.js,bootstrap-4,knockout-3.0,Javascript,Jquery,Knockout.js,Bootstrap 4,Knockout 3.0,我有一个使用knockout/jquery编写的单页应用程序。然而,我正在努力寻找更好的方法来处理要显示的视图。由于我需要更多的菜单项,您可以看到代码将如何变得更加难以管理。我想能够显示一个基于所选内容的视图,并更改CSS,以便您可以看到哪个选项卡也被选中 <div class="col-md-2 sidebar"> <div class="list-group"> <a href="#" class="list-grou
<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>
使用单个类/单击查看更改链接,并添加包含视图“键”的新属性,如:
<a href="#" data-view="dashboard" data-bind="click: changeContent">
(或以您习惯的编码方式)
然后,您可以只显示正确的内容,如:
<div style="display:none" data-bind="visible:vm.currentView()=='dashboard'" >
....
或添加单个动态选择器
data-bind="attr:{class:'content_'+vm.currentView()}"
tl;dr引入了一种新的可观察物,它持有一个“视图键”,一切都基于此,你可以做任何你想做的事情
data-bind="attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"
data-bind="attr:{class:'content_'+vm.currentView()}"