Ember add customEvents

Question

I'm using Ember 2.9 and would like to use the "paste" event.

How I can add paste as an customEvent on start up the application:

This is my current app.js:

import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

Did you check the guides ==> https://api.emberjs.com/ember/3.0/classes/Application/properties/customEvents?anchor=customEvents — Denis Nazarenko, Oct 02 '19 at 12:46
He has mentioned that he is using Ember 2.9 and the one you mentioned is available in Ember >=3.0. If following link could you help you out: https://stackoverflow.com/questions/21369990/how-to-listen-to-a-paste-event-on-a-textarea-in-emberjs — prat_bhan, Oct 02 '19 at 14:30
yes i read the guides and do some experiments, but nothing is helping :(. no i cant change to 3.0 i must use 2.9. i try to add customEvents in the extend-part, on Ember, on App. Nothing happens. — Zaphot, Oct 02 '19 at 14:46

score 1 · Answer 1 · answered Oct 03 '19 at 07:51

1

I've setup a demo Ember.js 2.9 app at https://github.com/bartocc/stackoverflow-2176861 that demonstrates the code below.

Here's is an example app.js to configure the Ember.js to listen to the paste event:

// /app/app.js
import Ember from 'ember';
import Resolver from './resolver';
import loadInitializers from 'ember-load-initializers';
import config from './config/environment';

let App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,

  // This is how you make your ember app listen the paste event
  customEvents: {
    paste: 'paste'
  }
});

loadInitializers(App, config.modulePrefix);

export default App;

Find more information in the Ember.js 2.9 API.

Then, make any component listen to the paste event with:

import Ember from 'ember';

export default Ember.Component.extend({
  paste(event) {
    const text = event.originalEvent.clipboardData.getData('Text');
    alert(`you've just pasted the text '${text}'`);
  }
});

answered Oct 03 '19 at 07:51

bartocc

727
1
7
19

Wouldn't be a simple `addEventListener()` be a more future proof solution? Especially cause there are no event hooks on `@glimmer/components`, which will be the default component base class in Ember Octane. – jelhan Oct 03 '19 at 08:48
as for Octane, I tend to agree with you @jelhan, but the OP question is about Ember.js 2.9 – bartocc Oct 03 '19 at 08:52
But using `addEventListener()` should work in Ember 2.9 as well. – jelhan Oct 03 '19 at 09:01
this solution works. but now i have a new problem. the paste event is triggered before the text appears in the input element. what i tried is to write the text from clipboard into the element and then fire the event. nothing changes. it remains empty. what i still used is key-up because then the text is also available after the key is released. how can i realize such a thing with paste? – Zaphot Oct 04 '19 at 09:36
your original question was about how to use the `paste` event @Zaphot. To keep things clear, you could probably create a new stackoverflow question with your new issue and post your own answer there. – bartocc Oct 07 '19 at 08:08
Sorry, I have lost the focus of the assignment. I have delete this answer. – Zaphot Oct 08 '19 at 11:05

Ember add customEvents

1 Answers1