使用敲除的键盘导航

Posted 2023-03-25

【中文标题】使用敲除的键盘导航

【英文标题】：keyboard navigation using knockout

【发布时间】：2013-12-31 04:04:26

【问题描述】：

我的视图模型中有一个可观察数组，我使用 foreach 和模板绑定将其绑定到 div 元素列表。如何使用键盘的向上和向下箭头键浏览这些 div 元素。

我想要的方式是当用户单击获得焦点的 div 元素的 1 时，当他按下向下箭头键时，下一个 div 元素获得焦点，同样，当他按下向上箭头键时，前一个 div 获得焦点.我在整个互联网上进行了搜索，但没有找到合适的答案。谢谢！！

【参考方案1】：

我想有几种方法可以做到这一点...这里有一个...

为您的 viewModel 提供一个“selectedObject”属性，并通过敲除处理每个 div 的点击事件。触发事件时，您可以将“selectedObject”设置为传递过来的上下文。在这个点击事件中，$.toggle() 通过 jQuery 调用 css 类，并为新的 div 元素上的向下箭头事件设置一个处理程序（确保清除现有的事件处理程序，以免与新的事件处理程序冲突）。

淘汰赛中的点击绑定：http://knockoutjs.com/documentation/click-binding.html JQuery 中的事件绑定：http://api.jquery.com/bind/

为您的尝试提供一个小提琴，我会尝试跟进。

【参考方案2】：

我建议在“组件/模板”的最顶层容器中为这个特定的小部件处理键盘快捷键。这使您可以在一个地方处理向上/向下，而不是让每个 li 负责它的快捷方式。

此外，为了使元素可以使用鼠标和原生选项卡事件进行选择，请查看“漫游选项卡索引”。

查看用于淘汰赛的焦点绑定也有帮助。

编辑： 也发现了这个有用的库。 https://github.com/bramstein/knockout.selection