Ember.js Evented on() Method

Last Updated : 15 Mar, 2023

Ember.js is an open-source JavaScript web framework that follows the Model-View-Controller (MVC) pattern. It provides conventions and best practices for organizing code and building user interfaces. Ember.js is used to build scalable, single-page web applications.

The on() method can register a callback function to be called when a specific event takes place. The Ember event system contains a function called on() which is helpful in many cases such as clicks.

Syntax :

object.on(eventName, target, method);

Parameters: This method accepts three parameters that are described below:

eventName: It is a string that specifies the name of the event you want to listen for.
Target: It is the object which will be bound to the callback function.
Method: It is the name of the callback function.

Return Value: This method returns this.

Steps to Install and Run Ember.js:

Step 1: To run the following examples, you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:

npm install ember-cli

Step 2: Now you can create the project by typing in the following piece of code:

ember new <project-name> --lang en

Step 3 : Navigate into the newly created directory :

cd <project-name>

Step 4 : Generate a new component and template for the click counter:

ember g component <project-name>

This will create a new route file at app/components/<project-name>

Example 1: Add a new template in the file at app/templates/components/<project-name>.hbs. Open the <project-name>.hbs file and add a button element with an {{on}} helper that will trigger a click event.

@app/templates/components/<project-name>.hbs

Javascript

<p>Click Count = {{this.total}}</p> 
  
<button type="button" {{on "click" (fn this.change 1)}}> 
    Click 
</button>

@app/components/<project-name>.js

Javascript

import Component from '@glimmer/component'; 
import { tracked } from '@glimmer/tracking'; 
import { action } from '@ember/object'; 
  
export default class CounterComponent extends Component { 
    @tracked count = 0; 
  
    get total() { 
        return this.count * this.args.multiple; 
    } 
  
    @action change(amount) { 
        this.count = this.count + amount; 
    } 
};

Output:

basic click counting application

Explanation: In this example, we define a component with a clickCount property that represents the number of times the component has been clicked. So whenever we click on the component, the click button will be increment by 1 every time. We use the on() method in this code is an event listener method used to bind a click event to the “Click” button. Every time the button is clicked, the change method will be executed with an argument of ‘1’.

Example 2: Type the following code to generate the component for this example:

ember g component <project-name>

@app/templates/components/<project-name>.hbs

HTML

<form {{on "submit" this.submitForm}}> 
    <div> 
        <label> 
            Name : 
            <input type="text" name="name" /> 
        </label> 
    </div> 
    <div> 
        <label> 
            Email : 
            <input type="email" name="email" /> 
        </label> 
    </div> 
    <div> 
        <label> 
            City : 
            <input type="text" name="text" / </label> 
    </div> 
    <div> 
        <button type="submit">Submit</button> 
    </div> 
</form>

@app/components/<project-name>.js

Javascript

import Component from '@glimmer/component'; 
import { action } from '@ember/object'; 
  
export default class CounterComponent extends Component { 
    @action submitForm() { 
        alert("The form has been submitted"); 
    } 
}