title: How do I capture keyPress events on an item in a list with ember.js?
body: <p>I'm trying to improve the accessibility of the applications I write. I'm also learning more about ember. As an exercise, I'm working with the <a href="http://todomvc.com/architecture-examples/emberjs/" rel="nofollow">ember-js todoMVC demo app</a> (<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/emberjs" rel="nofollow">code for the app is here</a>) to add features that assist users of screen readers.</p>
  
  <p>One thing I'd like to learn how to do is trigger editing of a todo item from the keyboard. The <code>&lt;label&gt;</code> element that holds the <code>title</code> of the item could be focused and then go into edit mode with a press of the Enter/Return key. In the demo, only a double-click on the <code>&lt;label&gt;</code> will open the item for editing. This behavior is handled by an <code>action</code> helper, which I understand is used specifically for making elements clickable. Here's the part of the template in question. I've elided features of the code to remove unrelated logic:</p>
  
  <pre><code>{{#each itemController="todo"}}
    &lt;li ... &gt;
      ...
      {{input type="checkbox" checked=isCompleted class="toggle"}}
      &lt;label {{action "editTodo" on="doubleClick"}}&gt;{{title}}&lt;/label&gt;
      ...
    &lt;/li&gt;
  {{/each}}
  </code></pre>
  
  <p>"Don't use the <code>action</code> helper" would seem to be the place to start. But what's the best way to handle each item now? </p>
  
  <p>As the <code>itemController="todo"</code> in the <code>each</code> helper denotes, there is a <code>TodoController</code> (which extends <code>ObjectController</code>) that defines an <code>editTodo</code> function. I'd like to have a keyPress event trigger that function. (For now, we can disregard the inspection of the event to capture only the Enter/Retrun key.)</p>
  
  <p>I've added <code>tabindex="0"</code> to the label element, and it appears I can focus it with my keyboard. I've tried adding a <code>keyPress</code> function to the <code>TodoController</code>'s <code>actions</code> hash, but it is not triggered when I press keys. I think this is because there isn't really a <code>View</code> for each item--the <code>ArrayController</code> for the todos and the template seem to be handling the display of the todo items between themselves.</p>
  
  <p>I've done a lot of reading today, and it seems like I may need to specify a <code>View</code> for each item, possibly using a <code>ContainerView</code> and specifying its <code>itemViewClass</code> property, so that I can focus the view when it's inserted. But the examples for this on the ember site don't use the <code>each</code> helper: they have lower-level mechanisms for adding the rendered view that I suspect are not current best practice. </p>
  
  <p>I suspect there's more than one way to do this, but I'm still too new to ember to figure it out. I think that figuring out this problem will illuminate a lot about the framework.</p>
  
  <p>What would you do to add the keyPress support for editing to the demo?</p>