【问题标题】:keyboard navigation using knockout使用敲除的键盘导航
【发布时间】:2013-12-31 04:04:26
【问题描述】:

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

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

【问题讨论】:

    标签: knockout.js focus keyboard-navigation


    【解决方案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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-03-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-06-11
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多