CODEWITHSUNDEEP
ember.js
Toran Billups
Toran Billups

Reputation: 27399

How to reproduce a global click handler with ember 1.13 (not using views)

I'm working through the usual ember 1.13 deprecations and found that this was a quick/easy way to add a global "click" listener back in ember 1.x (pre glimmer)

var ApplicationView = Ember.View.extend({
    click: function(event) {   
        this.get("controller").set("wat", true);
    }
});

But now that views are "out" where should this click listener live? I'm using the latest ember-cli / ember 1.13.1 at the time of writing this

Update

The obvious fix is to create a component - use it inside your application.hbs file and add a click handler (just like you see above) but I'm hoping for a little more guidance :)

Upvotes: 4

Views: 514

Answers (2)

Adam Reis
Adam Reis

Reputation: 4473

I know it's not the answer you were looking for, but I found no other way than to wrap the contents of my application.hbs in an application-wrapper component, to which I attached all the global click/resize and other event handlers.

{{#application-wrapper}}
  <div>Application HTML here</div>
  {{outlet}}
{{/application-wrapper}}

And then in components/application-wrapper.js:

export default Ember.Component.extend({
  setupWindowResizeEventListener: function() {
    $window.on('resize', () => {
      Ember.run.throttle(this, this.repositionModal, 50);
    });
  }.on('didInsertElement'),
  //etc
});

It seems to be the simplest work around to avoid the deprecation warnings.

Upvotes: 1

brian
brian

Reputation: 167

You may not require a component. You can create a global action in ApplicationRoute.

In any template:

<button {{ action 'foobar' }}>Foo Bar!</button>

routes/application.js

var ApplicationRoute = Ember.Route.extend({

  wat: false,

  actions: {
    foobar: function(event) {   
      this.set("wat", true);
    }
  }
});

Upvotes: 0

Related Questions