EmberJS - 模板修饰键

您可以使用 allowedKeys 选项允许修饰键与 {{action}} 辅助程序一起使用。有时 {{action}} 辅助程序会丢弃按下修饰键的点击事件。因此，allowedKeys 选项指定哪些键不应被忽略。

语法

<button {{action 'action-name' allowedKeys = "alt"}}></button>

示例

以下示例显示了 {{action}} 辅助程序上 allowedKeys 选项的用法。使用以下代码创建一个新组件并将其命名为 post-action.js −

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      //切换文本
      toggleBody: function () {
         this.toggleProperty('isShowing');
      }
   }
});

使用以下代码打开在 app/templates/ 下创建的 post-action.hbs 文件 −

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

现在使用以下代码打开在 app/templates/ 下创建的 application.hbs 文件 −

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

输出

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

现在您单击按钮，{{action}}帮助程序将与 allowedKeys 选项一起触发，以允许修饰键 −

emberjs_template.html