EmberJS - Teclas modificadoras de plantilla

Puede permitir teclas modificadoras junto con el asistente {{action}} usando la opción allowedKeys. A veces, el ayudante {{action}} descarta los eventos de clic con las teclas modificadoras presionadas. Por lo tanto, la opción allowedKeys especifica qué claves no deben ignorarse.

Sintaxis

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

Ejemplo

El ejemplo que se muestra a continuación muestra el uso de la opción allowedKeys en el ayudante {{action}} . Cree un nuevo componente y asígnele el nombre post-action.js con el siguiente código:

import Ember from 'ember';

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

Abra el archivo post-action.hbs creado en app / templates / con el siguiente código:

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

Ahora abra el archivo application.hbs creado en app / templates / con el siguiente código:

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

Salida

Ejecute el servidor Ember; recibirá el siguiente resultado:

Ahora hace clic en el botón, el ayudante {{action}} se activa junto con la opción allowedKeys para permitir las teclas modificadoras -