The documented Ember.on([keyCommand]) is now in violation of ember-cli-eslint recommendations

[dehuszar]

Hi there,

Nothing super urgent, but I've noticed that ember-cli-eslint is producing warnings about using the .on() syntax. I was able to create a comment disabling it in my component, (/* eslint ember/no-on-calls-in-components: "off" */ if anyone is curious) but I wonder whether there is an alternate syntax proposed that would not set off the linter?

[briarsweetbriar]

That's a good question. As far as I can tell, this warning is only to discourage us from using on when a lifecycle hook could be used instead, such as with on('didInsertElement'). There aren't plans to deprecate the use of Ember.Evented inside of components or anything like that, which means the current syntax doesn't need to change in the immediate future. That being said, if we can come up with a better syntax, this might be a good time to implement it.

Right now, the current syntax is the most elegant solution that I can think of, but I'm definitely open to hearing alternatives. A few important requirements if we want parity:

1. A handler can potentially be triggered by multiple keys, such as in on(keyUp('ArrowRight'), keyUp('KeyD')).
2. A key can trigger multiple handlers, such as with: handler1: on(keyUp('ArrowRight')), handler2: on(keyUp('ArrowRight')).
3. Modifier keys: on(keyUp('ArrowRight+shift+alt')).
4. Can specify an event type: on(keyUp('ArrowRight')) as well as on(keyDown('ArrowRight')).

[karellm]

There seems to be interest for a PR in the linter project if one of you want to fix it. See here: ember-cli/eslint-plugin-ember#223

[andrewcallahan]

@patience-tema-baron looks like Ember.Evented is officially about to be deprecated

[btecu]

@andrewcallahan that's in Ember Data. Is it there an RFC for Ember as well?

[andrewcallahan]

good catch @patience-tema-baron! I haven't seen one, but due to the new linting rules in ember-cli-eslint and this new depreciation in Ember Data, I'd guess we'd eventually see a depreciation for Ember at some point as well.

[Turbo87]

@andrewcallahan those things are unrelated to each other. the lint rule is indeed "broken" in the sense that it creates false positives and should be fixed. I don't see any immediate need for ember-keyboard to change its API though.

[Willibaur]

Thanks to the guys from EmberMap we can use the following markup

Inside your component, use the J key to navigate

{{keyboard-press
  key="KeyJ"
  on-press=(action 'YOUR ACTION')
}}

Then you can pass actions up by doing

// components/key-press.js 

import Component from '@ember/component';
import { EKMixin, keyDown } from 'ember-keyboard';

export default Component.extend(EKMixin, {
  key: null,
  'on-press'() {},

  didInsertElement() {
    this._super(...arguments);

    let key = this.get('key');
    let action = this.get('on-press');

    this.set('keyboardActivated', true);

    this.on(keyDown(key), action);
  }
});

Now you can handle your action in your controller.

Please do check full video here

[andrewcallahan]

Excellent!

[lukemelia]

#111 promotes a version of this component to part of this addon's public API and adds a couple of element modifiers to help as well.

[lukemelia]

#111 has been merged and will be released in v6.0.0