Embeer.js Evented on()用法及代碼示例

Ember.js 是一個遵循 Model-View-Controller (MVC) pattern 的開源 JavaScript Web 框架。它提供了組織代碼和構建用戶接口的約定和最佳實踐。 Ember.js 用於構建可擴展的single-page Web 應用程序。

on()方法可以注冊一個回調函數，在特定事件發生時調用。 Ember 事件係統包含一個名為on() 的函數，該函數在許多情況下(例如點擊)很有用。

句法：

object.on(eventName, target, method);

參數：此方法接受三個參數，如下所述：

eventName:它是一個字符串，指定要偵聽的事件的名稱。
Target:它是將綁定到回調函數的對象。
Method:它是回調函數的名稱。

返回值：該方法返回這個.

安裝和運行 Ember.js 的步驟：

步驟 1：要運行以下示例，您需要有一個 ember 項目。要創建一個，您需要先安裝ember-cli。在終端中寫入以下代碼：

npm install ember-cli

第 2 步：現在您可以通過輸入以下代碼來創建項目：

ember new <project-name> --lang en

步驟 3：導航到新創建的目錄：

cd <project-name>

第 4 步：為點擊計數器生成新組件和模板：

ember g component <project-name>

這將在 app/components/<project-name> 中創建一個新的路由文件

示例 1：在 app/templates/components/<project-name>.hbs 文件中添加新模板。打開 <project-name>.hbs 文件並添加一個帶有 {{on}} 幫助器的按鈕元素，該幫助器將觸發點擊事件。

@應用程序/模板/組件/<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; 
    } 
};

輸出：

基本點擊計數應用程序

說明：在此示例中，我們定義一個具有 clickCount 屬性的組件，該屬性表示該組件被單擊的次數。所以每當我們點擊該組件時，點擊按鈕每次都會加1。我們在這段代碼中使用的on()方法是一個事件監聽方法，用於將點擊事件綁定到“Click”按鈕。每次單擊按鈕時，都會使用 ‘1’ 參數執行更改方法。

示例 2：鍵入以下代碼以生成本示例的組件：

ember g component <project-name>

@應用程序/模板/組件/<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"); 
    } 
}

輸出：

基本表格申請

參考： https://api.emberjs.com/ember/4.11/classes/Evented/methods/on?anchor=on

相關用法

注：本文由純淨天空篩選整理自zaidkhan15大神的英文原創作品 Ember.js Evented on() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。