EmberJS - 操作
{{action}} 辅助类用于使 HTML 元素可点击，并且当用户点击事件时，操作将被转发到应用程序。
语法
<button {{action 'action-name'}}>Click</button>
上述代码将按钮 Click 添加到您的应用程序中，当用户单击按钮时，操作将被转发到指定的操作方法。
下表列出了操作的操作事件及其描述 −
| S.No. | 操作事件 &描述 |
|---|---|
| 1 | 操作参数
可以借助 {{action}} 帮助程序将参数传递给操作处理程序。 |
| 2 | 指定事件类型
可以使用 on 选项在 {{action}} 帮助程序上指定替代事件。 |
| 3 | 允许修饰键
您可以使用 allowedKeys 选项允许修饰键与 {{action}} 帮助程序一起使用。 |
| 4 | 修改操作的第一个参数
您可以通过为 {{action}} 帮助程序指定值选项来修改操作的第一个参数。 |
示例
下面给出的示例展示了如何使用 {{action}} 辅助函数使 HTML 元素可点击，并将操作转发到指定的操作方法。使用以下命令创建一个名为 post-action 的组件 −
ember g component post-action
打开在 app/component/ 下创建的 post-action.js 文件并添加以下代码 −
import Ember from 'ember';
export default Ember.Component.extend ({
actions: {
toggleBody() {
this.toggleProperty('isShowingBody');
}
}
});
使用以下代码打开在 app/templates/ 下创建的文件 post-action.hbs −
<h1>Hello</h1><h3><button {{action "toggleBody"}}>{{title}}Toggle</button></h3>
{{#if isShowingBody}}
<h2>Welcome To Tutorials Point</h2>
{{/if}}
{{yield}}
在 index.hbs 文件中，复制在 app/templates/ 下创建的以下代码 −
{{post-action}}
{{outlet}}
输出
运行 ember 服务器；您将收到以下输出 −
当您单击 Toggle 按钮时，它将显示来自模板文件的以下文本 −
emberjs_template.html
