EmberJS - Teclas modificadoras de modelo

Você pode permitir teclas modificadoras junto com o auxiliar {{action}} usando a opção allowedKeys. Às vezes, o auxiliar {{action}} descarta os eventos de clique com as teclas modificadoras pressionadas. Portanto, a opção allowedKeys especifica quais chaves não devem ser ignoradas.

Sintaxe

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

Exemplo

O exemplo abaixo mostra o uso da opção allowedKeys no helper {{action}} . Crie um novo componente e nomeie-o como post-action.js com o seguinte código -

import Ember from 'ember';

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

Abra o arquivo post-action.hbs criado em app / templates / com o seguinte código -

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

Agora abra o arquivo application.hbs criado em app / templates / com o seguinte código -

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

Resultado

Execute o servidor ember; você receberá a seguinte saída -

Agora que você clica no botão, o auxiliar {{action}} dispara junto com a opção allowedKeys para permitir as teclas modificadoras -