Я пытаюсь интегрировать некоторые компоненты пользовательского интерфейса на основе jQuery в приложение 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>
Это отлично работает при первой загрузке страницы, но когда впоследствии извлекаются новые данные, я не могу воссоздать вкладки. repeat.for Aurelia обновляет DOM новыми элементами, но я не могу снова вызвать $('#divTabs').tabs(), потому что плагин уже испортил div (обернул их в другие div, добавил классы и т. д.) в первый раз.
Вот плункер, который показывает проблему.
Я иду об этом неправильно? Есть ли способ заставить мой элемент перезагружаться при изменении связанного массива?
