将 jquery ui 应用于 can.Component 模板

Question

我正在使用 can.Component 和 JQueryUI 和小胡子创建一个菜单组件。

can.Component 呈现小胡子模板。自然地，这会将部分加载到 DOM 中。

我的问题是：

将 jQuery UI 功能应用于菜单，我必须调用：

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

...部分注入后DOM。我如何在组件中执行此操作？我尝试将前一行放在事件的 init 函数中。但是，那没有用。挂钩后是否有一些我可以放置此代码的地方？这样，在组件加载模板后，我就可以从组件本身应用 jquery 内容。

这是我目前所拥有的，但不起作用：

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

Answer 1

使用 inserted 事件并查找 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();
    }
  }
});

将 jquery ui 应用于 can.Component 模板

apply jquery ui to can.Component template

jquery-ui

canjs