- 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 - Template Modifier Keys
You can allow modifier keys along with the {{action}} helper by using the allowedKeys option. Sometimes the {{action}} helper discards the click events with pressed modifier keys. Therefore, the allowedKeys option specifies, which keys should not be ignored.
Syntax
<button {{action 'action-name' allowedKeys = "alt"}}></button>
Example
The example given below shows usage of allowedKeys option on the {{action}} helper. Create a new component and name it as post-action.js with the following code −
import Ember from 'ember'; export default Ember.Component.extend ({ actions: { //toggling the text toggleBody: function () { this.toggleProperty('isShowing'); } } });
Open the post-action.hbs file created under app/templates/ with the following code −
<button {{action "toggleBody" on = 'click' allowedKeys = "alt"}}>{{title}}</button> {{#if isShowing}} <h2>Welcome to TutorialsPoint</h2> {{/if}} {{outlet}}
Now open the application.hbs file created under app/templates/ with the following code −
{{post-action title = "Click Me"}} {{outlet}}
Output
Run the ember server; you will receive the following output −
Now you click on the button, the {{action}} helper triggers along with the allowedKeys option to allow the modifier keys −