键盘导航使用淘汰赛

时间:2013-12-12 16:21:16

标签: knockout.js focus keyboard-navigation

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

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

2 个答案:

答案 0 :(得分:0)

有几种方法我会想到这样做......这是一个......

为viewModel提供一个'selectedObject'属性,并通过knockout处理每个div的click事件。触发事件时,可以将“selectedObject”设置为传递的上下文。在这个click事件中,$ .toggle()通过jQuery对css类进行设置,并为新div元素设置向下箭头事件的处理程序(确保清除现有的事件处理程序,以免与新的事件处理程序冲突)。

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

提供你的尝试小提琴,我会尝试跟进。

答案 1 :(得分:0)

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

此外,为了使用鼠标和本机标签事件选择元素,请查看"漫游标签索引"。

调查淘汰的焦点绑定也有帮助。

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