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

Question

我正在尝试将一些基于 jQuery 的 UI 组件集成到 Aurelia 应用程序中（特别是选项卡组件）。我试过 jQWidgets and EasyUI 并且每个都遇到了同样的问题。它们的工作方式基本相同：创建一些代表选项卡的 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>

然后我在主视图中像这样使用这个元素（其中 users 是从服务器获取的对象数组）：

<tabs-element area-id="TopArea" items.bind="users"></tabs-element>

这在页面首次加载时工作正常，但是当随后获取新数据时，我似乎无法重新创建选项卡。 Aurelia 的 repeat.for 用新项目更新 DOM，但我不能再次调用 $('#divTabs').tabs()，因为插件已经与 div 混为一谈（将它们包裹在其他 div 中，添加类, 等等...) 第一次.
Here's a plunker 说明了问题。

我是不是走错了路？有没有办法在绑定数组更改时强制重新加载我的元素？

Answer 1

在我发布问题后，我开始阅读有关 Aurelia 的增强功能的信息，我认为这就是我的问题的答案。这让我可以在代码而不是标记中管理选项卡创建（我实际上认为无论如何更可取）。

我的自定义元素视图现在基本上是空的（div 插件需要的空 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});
    });
}

经过进一步审查，这似乎与 Kendo UI Bridge works, which makes me think that this is the right track. Many thanks to this post 阐明此功能的方式相似。

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

How to add a tab (or other) UI component with Aurelia

javascript

jquery

jquery-easyui

jqwidget

aurelia