WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

EmberJS Actions


The {{action}} aide class is utilized to make the HTML component interactive and activity will be sent to the application when the client clicks an event.

Syntax

 

<button {{action 'activity name'}}>Click</button> 

The above code includes the catch Click to your application in which the activity will be sent to the predefined activity technique when a client taps the button.

The following table records down the activity occasions of activities alongside their portrayal −

S.No. Action Events & Description
1 Action Parameters

The contentions can be passed to an activity handler with the assistance of {{action}} helper.

2 Specifying the Type of Event

The elective occasion can be determined on {{action}} aide by utilizing the on option.

3 Allowing Modifier Keys

You can permit modifier keys alongside the {{action}} assistant by utilizing the allowedKeys option.

4 Modifying Action's first Parameter

You can change the activity's first parameter by indicating an esteem choice for the {{action}} helper.

Example

The model given beneath demonstrates the utilization of {{action}} partner to make the HTML component interactive and activity will be sent to the predefined activity technique. Make a part with name post-activity by utilizing the accompanying direction −

 

ash g segment post-activity 

Open the post-action.js record made under app/part/ and include the accompanying code −

 

import Ember from 'coal'; 

trade default Ember.Component.extend ({ 

activities: { 

toggleBody() { 

this.toggleProperty('isShowingBody'); 

} 

} 

}); 

Open the record post-action.hbs document made under app/layouts/ with the accompanying code −

 

<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3> 

{{#if isShowingBody}} 

<h2>Welcome To Welookups</h2> 

{{/if}} 

{{yield}}