Ember: invoke action on focused input field with argument

I am building a simple Todo app as I research EmberJS v2.14. I want to create a built-in manual editing function - the user will double-click on a line of to-do list text to open an input field. The user will then edit the todo, which will bind twice to the helper object. And then when the focus is lost, the application will revert the input field back to the newly edited text.

The next piece of code is inside the helper block {{each}}

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 parts

  • I can double click to go into edit mode (i.e. openForEditing()

    called correctly with a write argument.)
  • the action handler is closeForEditing()

    correctly called when focus is lost from the input field.

Parts don't work

  • I don't know how to pass the todo object model as an argument, so that the handler closeForEditing()

    can do the appropriate setting work isOpenForEdit

    back to false.

-

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

Q) Is there any other approach I can take to achieve my goal?

+3


source to share


2 answers


You can pass your action like this:



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

      

+2


source


You can curry todo

by creating a close action with the action helper



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

      

+2


source







All Articles