1

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();
    }
  }
});
RedMage
  • 1,126
  • 1
  • 9
  • 21
  • 1
    We discussed some strategies in another thread recently. See if this helps you out: http://stackoverflow.com/questions/27974803/how-to-bind-an-event-to-can-control-to-run-whenever-an-element-matching-the-sele -- I recommend using a Mustache helper to you, just as I did to the person who posed that question – air_hadoken Jan 23 '15 at 01:33

1 Answers1

5

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();
    }
  }
});
Daff
  • 43,734
  • 9
  • 106
  • 120