键盘导航使用淘汰赛

Question

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

我想要的方式是，当用户点击获得焦点的div元素中的一个，并且当他按下向下箭头键时，下一个div元素获得焦点，并且类似地，当他按下向上箭头键时，前面的div得到焦点。我在互联网上搜索了所有内容，但没有找到合适的答案。谢谢！！

Answer 1

有几个方法，我会想象这样做......这里有一个...

送“selectedObject”属性到您的视图模型，并通过淘汰赛处理每格的单击事件。当事件被触发时，您可以将'selectedObject'设置为传递的上下文。在这个点击事件中，通过jQuery $ .toggle（）css类，并为新的div元素上的向下箭头事件设置一个处理程序（确保清除现有的事件处理程序，以免与新的事件处理程序发生冲突）。

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

提供一个拨弄你的这种尝试，我会尽力跟进。

Answer 2

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

此外，为了使元素可以使用鼠标和本机选项卡事件进行选择，请查看“巡览选项卡索引”。

调查挖空的焦点绑定也有帮助。

编辑：找到这个有用的图书馆。 https://github.com/bramstein/knockout.selection