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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。