模板指定事件类型操作

可以使用 on 选项在 {{action}} 辅助工具上指定备用事件。

语法

<button {{action "action-name" on = "event-name"}}>Click</button>

示例

下面给出的示例指定了 {{action}} 辅助工具上的备用事件。创建一个把新的路由命名为 post-action.js 的文件，其中包含以下代码 -

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      //toggling the text
      toggleBody: function () {
         this.toggleProperty('isShowing');
      }
   }
});

打开在 app/templates/ 下创建的 post-action.hbs 文件，其中包含以下代码 -

<button {{action "toggleBody" on = 'click'}}>{{title}}</button>
{{#if isShowing}}
<h2>Welcome to TutorialsPoint</h2>
{{/if}}
{{outlet}}

接下来，打开在 app/templates/ 下创建的 application.hbs 文件，其中包含以下代码 -

{{post-action title = "Click Me"}}
{{outlet}}

输出

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

接下来，单击按钮，{{action}} 辅助工具将触发指定元素上的操作，并显示以下结果 -