apply jquery ui to can.Component template

Question

I am creating a menu component using can.Component with JQueryUI and mustaches.

The can.Component renders a mustache template. Naturally, this loads the partial into the DOM.

My problem is this:

Apply the jQuery UI functionality to the menu, I have to invoke:

$('#menu').menu();

... after the partial is injected into the DOM. How may I do this within the component? I tried placing the prior line within the init function in the events. However, that did not work. Is there some after hook where I may place this code? That way after the component loads the template I can then apply the jquery stuff from within the component itself.

This is what I have so far, that does not work:

var Menu = can.Component.extend({
  tag: 'menu',
  template: can.view('/assets/neo_admin/views/menu.mustache'),
  events: {
    init: function(){
        $('#menu').menu();
    }
  }
});

Answer 1

Use the inserted event and look up on this.element:

var Menu = can.Component.extend({
  tag: 'menu',
  template: can.view('/assets/neo_admin/views/menu.mustache'),
  events: {
    inserted: function(){
        this.element.find('#menu').menu();
    }
  }
});