Question

我试图将一些基于jQuery的UI组件集成到Aurelia应用程序（特别是选项卡组件）中。我尝试了jQWidgets和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，这是UI插件所需的）。我挂钩到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的工作方式相似，这让我觉得这是正确的轨道。非常感谢this post了解此功能。

如何使用Aurelia

1 个答案: