Ember.js Evented on() Method

Last Updated : 24 Apr, 2025

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:

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");
    }
}