javascript - 如何使用 ember.js 捕获列表中某个项目的按键事件？

Question

我正在努力提高我编写的应用程序的可访问性。我也在了解更多关于 ember 的知识。作为练习，我正在使用 ember-js todoMVC demo app ( code for the app is here ) 添加帮助屏幕阅读器用户的功能。

我想学习如何做的一件事是从键盘触发待办事项的编辑。 <label>包含 title 的元素可以聚焦该项目的焦点，然后按 Enter/Return 键进入编辑模式。在演示中，只需双击 <label>将打开该项目进行编辑。此行为由 action 处理helper，据我所知专门用于使元素可点击。这是有问题的模板部分。我删除了代码的功能以删除不相关的逻辑:

{{#each itemController="todo"}}
  <li ... >
    ...
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label {{action "editTodo" on="doubleClick"}}>{{title}}</label>
    ...
  </li>
{{/each}}

“不要使用 action 助手”似乎是一个起点。但现在处理每件元素的最佳方法是什么？

作为itemController="todo"在 each helper 表示，有一个 TodoController (扩展 ObjectController )定​​义 editTodo功能。我想要一个 keyPress 事件触发该功能。 (目前，我们可以忽略对事件的检查，只捕获 Enter/Retrun 键。)

我已添加tabindex="0"到标签元素，看来我可以用键盘将其聚焦。我尝试添加 keyPress功能到TodoController的actions哈希，但当我按键时它不会被触发。我认为这是因为实际上没有 View对于每个项目 - ArrayController对于待办事项和模板似乎正在处理它们之间待办事项项的显示。

我今天读了很多书，看来我可能需要指定 View对于每个项目，可能使用 ContainerView并指定其 itemViewClass属性，以便我可以在插入 View 时聚焦 View 。但 ember 网站上的示例并未使用 each helper:他们有较低级别的机制来添加渲染 View ，我怀疑这不是当前的最佳实践。

我怀疑有不止一种方法可以做到这一点，但我仍然太新，无法弄清楚。我认为弄清楚这个问题将会对框架有很多启发。

您会如何向演示添加按键编辑支持？

Answer 1

最简单的方法是将 on="click" 事件绑定(bind)更改为 on="keyPress"。您可以在此处找到支持的事件列表:

http://emberjs.com/api/classes/Ember.View.html#toc_event-names

正如您已经提到的，您必须在标签元素上使用 tabindex hack。但看起来标签在 Chrome 中不可进行 tabindexable - Firefox 和 IE 都可以。

{{#each itemController="todo"}}
  <li ... >
    ...
    {{input type="checkbox" checked=isCompleted class="toggle"}}
    <label {{action "editTodo" on="keyPress"}}>{{title}}</label>
    ...
  </li>
{{/each}}