EmberJS - 动作

{{action}} 辅助类用于使 HTML 元素可点击，当用户点击事件时，操作将转发到应用程序。

语法

<button {{action 'action-name'}}>Click</button>

上述代码将按钮点击添加到您的应用程序中，当用户点击按钮时，操作将转发到指定的操作方法。

下表列出了操作的事件以及它们的描述：

序号	操作事件及描述
1	操作参数可以使用 {{action}} 辅助程序将参数传递给操作处理程序。
2	指定事件类型可以使用 on 选项在 {{action}} 辅助程序上指定替代事件。
3	允许修饰键您可以使用 allowedKeys 选项允许 {{action}} 辅助程序使用修饰键。
4	修改操作的第一个参数您可以通过为 {{action}} 辅助程序指定 value 选项来修改操作的第一个参数。

示例

以下示例演示了如何使用 {{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}}

在 app/templates/ 下创建的 index.hbs 文件中，复制以下代码：

{{post-action}}
{{outlet}}

输出

运行 ember 服务器；您将收到以下输出：

当您点击切换按钮时，它将从模板文件中显示以下文本：

emberjs_template.htm

打印页面

序号	操作事件及描述
1	操作参数可以使用 {{action}} 辅助程序将参数传递给操作处理程序。
2	指定事件类型可以使用 on 选项在 {{action}} 辅助程序上指定替代事件。
3	允许修饰键您可以使用 allowedKeys 选项允许 {{action}} 辅助程序使用修饰键。
4	修改操作的第一个参数您可以通过为 {{action}} 辅助程序指定 value 选项来修改操作的第一个参数。