EmberJS - Handling Action Completion and Passing Arguments

The component can handle action's completion by returning a promise and arguments can be passed to a component by using an action helper.

Syntax

The action can be implemented as −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      action_name() {
         //code here
      }
   }
});

The arguments can be passed to a component as −

{{component_name text = "text-here" action-helper = (action "action_name" "args")}}

Example

The example given below specifies handling action completion and passing arguments in your application. Create a component with the name ember-actions and open the component template file ember-actions.js created under app/components/ with the following code −

import Ember from 'ember';

export default Ember.Component.extend ({
   doubleClick: function() {
      this.toggleProperty('isEditing');
   },
   isEditing: false

});

Open the ember-actions.hbs file created under app/templates/components/ and enter the following code −

{{#if isEditing}}
   <p>Title: {{input value = title}}</p>
   <p>url: {{input value = url}}</p>
   <p>Double click on the save button to save information.</p>
   <button>Save</button>
{{else}}
   <p>Double click on the form to enter details:</p>
   <p>Title: {{title}}</p>  
   <p>url: {{url}}</p>
{{/if}}
{{yield}}

Create the application.hbs file and add the following code −

{{ember-actions}}
{{outlet}} 

Output

Run the ember server; you will receive the following output −

After double clicking on the form, it will display the form and enter the details in it. Next double-click on the Save button to save the details −

Now you will see the saved details as shown in the screenshot below −