- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
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 −