我有一个使用 Knockout/jquery 编写的单页应用程序。但是,我正在努力寻找更好的方法来处理要显示的 View 。由于我需要更多菜单项,您可以看到代码将变得更加难以管理。我希望能够根据所选内容显示 View 并更改 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>
最佳答案
使用单个类/单击作为 View 更改链接,并添加一个包含 View “键”的新属性,例如:
<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 引入了一个新的可观察对象,它持有一个“viewkey”,一切都基于它,你可以做任何你想做的事情
关于javascript - Knockout Menu绑定(bind)切换 View 并更改css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53264797/