javascriptember.jsinputhelperinline-editing

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


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

Pieces Not Working

--

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?


Solution

  • You can pass your action in following way:

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