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"); } } |
Output:
basic form application
Reference: https://api.emberjs.com/ember/4.11/classes/Evented/methods/on?anchor=on