jQuery document.ready callback

Learning Team
1

Hi! I’m an Ember beginner and need some help.

I have main template in app/templates/application.hbs

And I need to add jQuery handler to one DOM element.

What shall I do?

2

I would be cautious about how much jQuery you use in ember, it can be tough to get it right.

In this case, are you looking for an “ember ready” type event? Or just when the application template was rendered?

3

Not sure about ‘Ember ready’, so I think ‘template rendered’ is more suitable in my case

4

Well, to explain both;

Application ready() can be defined in the app/app.js file and is triggered:

when the Application has become ready, immediately before routing begins. The call will be delayed until the DOM has become ready.

I use this method to hide a loading spinner while the app “boots”. Ex:

// ...
    ready: function() {
        Ember.$('#app-loading').hide();
    }
// ...

While others use the component didRender() method or didInsertElement() event on a component in the application.hbs template.

{{!-- app/templates/application.hbs --}}
{{app-loaded}}
{{!-- ... --}}

// app/components/app-loaded.js
// ...
    didRender() {
        Ember.$('#app-loading').hide();
    }
// ...

Both would be triggered at a similar time, but not exactly the same time. Do either of these fit your needs?

5

Awesome! Thank you a lot!

6

Well, now I have such output:

bash-3.2$ ember b

app.js: line 16, col 9, '$' is not defined.

1 error

===== 1 JSHint Error

Built project successfully. Stored in "dist/".

What I have done: ================= app/app.js ==============

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,
  ready: function() {
    Ember.$(".bookashko-logo4-bklens1").click( function() {
        $(this).toggleClass("bookashko-logo4-bklens2");
    });
  }
});

And code not working.

7

To fix the hint error you need to append Ember. to the second jQuery call.

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver,
  ready: function() {
    Ember.$(".bookashko-logo4-bklens1").click( function() {
        Ember.$(this).toggleClass("bookashko-logo4-bklens2");
    });
  }
});

Is this .bookashko-logo4-bkklens1 available in the DOM at the time this runs? Eg: Is it within the index.html file?

8

Error fixed, thank you. Script not working.

Element with noted class is in the templates/application.hbs

9

In that case, I’d suggest making the element in question an Ember Component. You can do more programmatically when it’s a component.

Basic example of what you’re trying to achieve (at least what you’re describing);

// app/components/foo-bar.js
import Ember from 'ember';

export default Ember.Component.extend({
    classNameBindings : ['bookashko-logo4-bklens2'],
    'bookashko-logo4-bklens2' : false,
    click() {
        this.toggleProperty('bookashko-logo4-bklens2');
    }
});

{{!-- app/templates/application.hbs --}}
{{foo-bar}}