- 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 - Sending Actions
You can use event handlers to send actions from component to your application.
Syntax
{{comp_name action = "name_of_action"}}
Example
The example given below specifies sending actions from components to your application. Create a component with the name comp-yield and open the component template file comp-yield.js created under app/components/ with the following code −
import Ember from 'ember'; export default Ember.Component.extend ({ actions: { compFunc: function () { this.set('title', "Hello...Welcome To Tutorialspoint..."); //sendAction() method sends the specified action when the component is used in a template this.sendAction(); } } });
Open the comp-yield.hbs file created under app/templates/components/ and enter the following code −
<h2>Sending Actions to a Component</h2> <input type = "button" value = "Click Here" {{action "compFunc"}} /><br/> <p><b>{{title}}</b></p> {{yield}}
Create the application.hbs file and add the following code −
{{comp-yield title = title action = "compFunc"}} {{outlet}}
Output
Run the ember server; you will receive the following output −
When you click on the button, it will display the text as shown in the screenshot below −
emberjs_component.htm
Advertisements