- 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 - Actions
The {{action}} helper class is used to make the HTML element clickable and action will be forwarded to the application when the user clicks an event.
Syntax
<button {{action 'action-name'}}>Click</button>
The above code adds the button Click to your application in which the action will be forwarded to the specified action method when a user clicks the button.
The following table lists down the action events of actions along with their description −
S.No. | Action Events & Description |
---|---|
1 | Action Parameters
The arguments can be passed to an action handler with the help of {{action}} helper. |
2 | Specifying the Type of Event
The alternative event can be specified on {{action}} helper by using the on option. |
3 | Allowing Modifier Keys
You can allow modifier keys along with the {{action}} helper by using the allowedKeys option. |
4 | Modifying Action's first Parameter
You can modify the action's first parameter by specifying a value option for the {{action}} helper. |
Example
The example given below shows the usage of {{action}} helper to make the HTML element clickable and action will be forwarded to the specified action method. Create a component with name post-action by using the following command −
ember g component post-action
Open the post-action.js file created under app/component/ and add the following code −
import Ember from 'ember'; export default Ember.Component.extend ({ actions: { toggleBody() { this.toggleProperty('isShowingBody'); } } });
Open the file post-action.hbs file created under app/templates/ with the following code −
<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3> {{#if isShowingBody}} <h2>Welcome To Tutorials Point</h2> {{/if}} {{yield}}
In the index.hbs file, copy the below code which is created under app/templates/ −
{{post-action}} {{outlet}}
Output
Run the ember server; you will receive the following output −
When you click on the Toggle button, it will display the following text from the template file −