Как добавить вкладку (или другой) компонент пользовательского интерфейса с Aurelia

Question

Я пытаюсь интегрировать некоторые компоненты пользовательского интерфейса на основе 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(), потому что плагин уже сбрасывал с divs (завернул их в другие divs, добавленные классы и т. Д.) В первый раз.
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 за то, что он пролил свет на эту функцию.