Where to run jQuery after ember template renders?

Question

With Views deprecated, I'm having trouble discerning where to run jQuery after a Template has rendered.

I have a simple index Template for a foods resource (templates/foods/index.hbs), and wish to run the following jQuery after index.hbs renders:

this.$('[data-toggle="tooltip"]').tooltip();

I know one can create a Component that then has a didInsertElement hook, but I'm not clear on how I'd route to the Component if I did this. Would I then "double dip" by having my apps/templates/foods/index.hbs Template simply call the new Component, which would have its own template that would be the original index.hbs Template?

I'm sure I'm missing something simple here. Anyone care to point me in the right direction?

Answer 1

You can call jQuery in route:

export default Ember.Route.extend({
  actions: {
    didTransition() {
      Ember.run.next(this, 'initTooltip');
    }
  },
  initTooltip() {
    Ember.$('[data-toggle="tooltip"]').tooltip();
  }
});

You can also create component and use it inside your template like this:

{{tooltip-wrapper}}
  <!-- HTML here -->
{{/tooltip-wrapper}}

And call jQuery code in didInsertElement of tooltip-wrapper component.