Переключатель привязки меню Knockout и изменение css
У меня есть одностраничное приложение, написанное с использованием knockout / 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 [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
используйте один класс / щелчок для ссылок изменения представления и добавьте новый атрибут, содержащий «ключ» вашего представления, например:
<a href = "#" data-view = "dashboard" data-bind = "click: changeContent">
в вашей функции changeContent прочитайте атрибут и установите для него новое наблюдаемое, например, currentView
sth. нравиться:
vm.currentView($(this).attr('data-viewkey'))
(или как вы привыкли кодировать)
затем вы можете просто показать правильный контент, например:
<div style = "display:none" data-bind = "visible:vm.currentView()=='dashboard'" >
....
или вы можете переключить "активный класс"
data-bind = "attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"
или добавить отдельные динамические селекторы
data-bind = "attr:{class:'content_'+vm.currentView()}"
tl; dr представьте новый наблюдаемый объект, содержащий "ключ просмотра", на котором все основано, и вы можете делать все, что захотите.