1. ember-helpers-on-action 简介
ember-helpers-on-action 是一个 Ember.js 的 npm 包，用于绑定 DOM 事件到组件行为中。该包为开发者提供了一种轻松的方法为组件添加事件监听器。
2. ember-helpers-on-action 安装
安装 ember-helpers-on-action 只需要在终端输入以下命令：
npm install ember-helpers-on-action
安装成功之后可以在组件声明中引入：
import onAction from 'ember-helpers-on-action';
3. ember-helpers-on-action 使用方法
通过以下例子来解释如何使用 ember-helpers-on-action。
3.1 绑定点击事件
<button> 元素是最常见的DOM元素之一，现在我们来看如何使用 ember-helpers-on-action 绑定 <button> 元素的点击事件。
<button {{on-action (action 'buttonClicked')}}>Click Me</button>在上面的代码中，我们使用了 {{on-action}} helper 来绑定了一个 action，然后将其传递给 <button> 元素的 onclick 事件。
现在，我们来看看组件中的 action 是如何定义的：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- ----------- ------- --------- -
-------
--------------- -
------------------- -----------
-
-当 <button> 元素被点击时，buttonClicked 方法将被调用，同时在控制台中输出 Button Clicked!。
3.2 绑定输入事件
使用 ember-helpers-on-action 监听输入事件也非常简单，下面是一个示例：
<input type="text" {{on-action (action 'textInput')}}>在上面的代码中我们使用了 {{on-action}} helper 来绑定了一个 action，然后将其传递给 <input> 元素的 oninput 事件。
现在，我们来看看组件中的 action 是如何定义的：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- ----------- ------- --------- -
-------
---------------- -
--------------------------------
-
-当 <input> 元素被输入时，textInput 方法将被调用，同时在控制台中输出当前 <input> 元素的值。
4. 结语
在我们的前端开发工作中，dom 事件的监听是很常见的需求，ember-helpers-on-action 为我们提供了一种简单而优雅的方式来完成这项工作。它绑定的 action 与 Ember.js 代码中的 actions（actions hash）类似。使用该工具，能够更加轻松地将action绑定到 DOM 事件，从而实现更好的代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca1c