Javascript 如何使用Aurelia添加选项卡（或其他）UI组件

我正在尝试将一些基于jQuery的UI组件集成到Aurelia应用程序中（特别是选项卡组件）。我试过了，而且每个人都有同样的问题。它们的工作方式基本相同：创建一些表示选项卡的div，然后调用类似

$（'#divTabs'）.tabs（）的方法

我创建了一个自定义元素，如下所示：

@customElement('tabs-element')
@inject(Element)
export class Tabs{
    @bindable items;
    @bindable areaId;

    constructor(element) {
        this.element = element;
    }

    attached(){
       $(this.element).tabs();
    }           
}

<template>
    <div id.bind="areaId">
        <div repeat.for="item of items" title.bind="item.id">
            ${item.username}

            <!-- Eventually I want to use "compose" here  ->
            <!--<compose view-model="component/${item.name}"></compose>-->
        </div>
    </div>
</template>

以这样的观点：

@customElement('tabs-element')
@inject(Element)
export class Tabs{
    @bindable items;
    @bindable areaId;

    constructor(element) {
        this.element = element;
    }

    attached(){
       $(this.element).tabs();
    }           
}

<template>
    <div id.bind="areaId">
        <div repeat.for="item of items" title.bind="item.id">
            ${item.username}

            <!-- Eventually I want to use "compose" here  ->
            <!--<compose view-model="component/${item.name}"></compose>-->
        </div>
    </div>
</template>

当页面第一次加载时，这很好，但是当随后获取新数据时，我似乎无法重新创建选项卡。Aurelia的
重复。for
用新项目更新DOM，但我不能再次调用
$（'#divTabs'）.tabs（）
，因为插件第一次已经弄脏了div（将它们包装在其他div中，添加了类等）。

这说明了问题所在

我走错方向了吗？有没有办法在绑定数组发生变化时强制我的元素重新加载？
在我发布了我的问题后，我开始阅读有关Aurelia增强功能的内容，我认为这就是我问题的答案。这让我可以用代码而不是标记来管理选项卡的创建（我实际上认为这是最好的）

我的自定义元素视图现在基本上是空的（除了UI插件需要的空div）。我钩住itemsChanged事件并在那里创建选项卡：

itemsChanged(newValue, oldValue){
    //semi-pseudo code here
    //clear out existing tabs
    $('#divTabs').tabs('clear');        

    //loop through item array and create a tab for each item    
    newValue.forEach(item => {
        $('#divTabs').tabs('addLast', item.ComponentTitle, '<div id="' + item.ComponentTitle + '"><compose view-model="component/' + item.ComponentName + '"></compose></div>');
        let el = document.querySelector('#' + item.ComponentTitle);
        this.templatingEngine.enhance({element: el});
    });
}

itemsChanged（新值、旧值）{
//这里是半伪代码
//清除现有选项卡
$（'#divTabs'）。tabs（'clear'）；
//循环遍历项数组，并为每个项创建一个选项卡
newValue.forEach（项=>{
$（'#divTabs'）.tabs（'addLast'，item.ComponentTitle'，）；
设el=document.querySelector（“#”+item.ComponentTitle）；
增强（{element:el}）；
});
}

经进一步审查，这似乎与工作方式类似，这使我认为这是正确的轨道。非常感谢您对这一特性的介绍。
您将元素作为类成员进行了正确的设置，那么为什么不能在将新用户分配给类成员用户后调用
$（this.element）.tabs（）
，因为从第一次调用
$（this.element）.tabs（）开始，DOM结构就已经混乱了，插件阻塞了。