EmberJS - Tasti di modifica del modello

Puoi consentire i tasti modificatori insieme all'helper {{action}} utilizzando l'opzione allowedKeys. A volte l' helper {{action}} ignora gli eventi di clic con i tasti modificatori premuti. Pertanto, l' opzione allowedKeys specifica quali chiavi non devono essere ignorate.

Sintassi

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

Esempio

L'esempio riportato di seguito mostra l'utilizzo dell'opzione allowedKeys sull'helper {{action}} . Crea un nuovo componente e chiamalo post-action.js con il codice seguente:

import Ember from 'ember';

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

Apri il file post-action.hbs creato in app / templates / con il seguente codice:

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

Ora apri il file application.hbs creato in app / templates / con il seguente codice -

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

Produzione

Esegui il server ember; riceverai il seguente output -

Ora fai clic sul pulsante, l' helper {{action}} si attiva insieme all'opzione allowedKeys per consentire i tasti di modifica -