Ember: Call Action on Input Field on Focus Out with Argument

3
votes

I'm creating a simple Todo App as I explore EmberJS v2.14. I want to build in a manual inline editing feature--the user will double-click on a todo line item text span, to open up a input field. The user will then edit the todo, which will be double bound to a backing object. And then when focus is lost, the app will re-close the input field back to the newly edited text.

The following fragment of code is inside an {{each}} block helper, and it almost works.

{{#unless todo.isOpenForEdit}}
   <span {{action 'openForEditing' todo on='doubleClick'}}>{{todo.text}}</span>
{{else}}
  {{input type="text" value=todo.text action='closeForEditing' on='focus-out'}}
{{/unless}}

Working Pieces

  • I can double click to go to editing mode (i.e. openForEditing() is correctly called with the write argument.)
  • the action handler closeForEditing() is correctly called when focus is lost from the input field.

Pieces Not Working

  • I don't know how to pass the todo object model as an argument, so that the closeForEditing() handler can do the appropriate work of setting isOpenForEdit back to false.

--

Q) How do I pass an argument to an action handler while working with the input helper?

Q) Is there a different approach I can take, to achieve my goal?

2
javascriptember.jsinputhelperinline-editing

2 Answers

2
votes

You can curry todo by creating closure action using action helper

{{input type="text" value=todo.text action=(action 'closeForEditing' todo) on='focus-out'}}
2
votes

You can pass your action in following way:

 {{input type="text" value=todo.text focusOut=(action 'closeForEditing' todo)}}