Currently, I am in the process of developing a basic Todo App to get familiar with EmberJS version 2.14. One feature I aim to integrate is manual inline editing where users can double-click on a todo item text span to activate an input field for editing. The changes made by the user will be synchronized with a backing object and when focus is removed, the input field should revert back to displaying the edited text.
The code snippet below resides within an {{each}} block helper and it is almost fully functional.
{{#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}}
Functioning Components
- You can successfully enter editing mode by double-clicking (i.e. openForEditing() is correctly triggered).
- The action handler closeForEditing() is appropriately executed upon losing focus from the input field.
Incomplete Components
- I am unsure how to pass the todo object model as an argument so that the closeForEditing() function can reset isOpenForEdit to false.
--
Q) How can I pass arguments to an action handler when using the input helper?
Q) Is there an alternative method I could utilize to accomplish my objective?