Использование jQuery DataTables с Aurelia

Question

Мне нужен совет относительно использования jQuery DataTables с Aurelia. В основном я столкнулся с двумя проблемами.

1. Невозможно определить наилучший способ его инициализации ПОСЛЕ завершения цикла привязки repeat.for. По-видимому, этот цикл все еще работает даже после того, как запущен жизненный цикл attached().
2. Если я использую метод $(myRef).DataTables(data: myArray) для заполнения таблицы и вставляю ссылки (<a href-route=... click.delegate=...>) в эту таблицу, Aurelia, похоже, не распознает ссылки или не активирует маршрутизатор.

Задача 1: Вот моя попытка заполнить таблицу, используя Аурелии связывания. Aurelia правильно делает таблицу, и я могу просто подождать 2-3 секунды, а затем загрузить DataTables, но это неправильный путь. У меня нет окончательного события, чтобы вызвать загрузку класса DataTables, потому что я не знаю, когда repeat.for будет завершен.

<div class="table-responsive"> 
    <table ref="tblUserList" class="table table-condensed table-hover table-striped" width="100%"> 
    <thead> 
     <tr> 
     <th><span t="Username"></span></th> 
     <th><span t="First_name"></span></th> 
     <th><span t="Last_name"></span></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr repeat.for="record of records"> 
     <td><a route-href="route: user; params.bind: {id: record.user_id}" click.delegate="$parent.select(record)">${record.user_username}</a></td> 
     <td>${record.p_fname}</td> 
     <td>${record.p_lname}</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Задача 2: Вот моя попытка заполнить таблицу с помощью метода JQuery. DataTables успешно загружает таблицу, но Aurelia не распознает ссылки или действие триггера.

$(this.tblUserList).dataTable({ 
    "paginate": true, 
    "pageLength": 10, 
    data: this.records, 
    columns: [ 
    { data: 'user_username', 
     fnCreatedCell: function (nTd, sData, oData, iRow, iCol) { 
     $(nTd).html("<a route-href='route: user; params.bind: {id:" + oData.user_id + "}' click.delegate='$parent.select(" + oData.user_id + ")'>" + oData.user_username + "</a>"); 
     } 
    }, 
    { data: 'p_fname' }, 
    { data: 'p_lname' } 
    ] 
}); 

Может ли кто-нибудь помочь мне решить любую из вышеуказанных проблем? Или ... я подхожу к этой проблеме не так? Лучше ли использовать метод jQuery для заполнения или цикл привязки Aurelia repeat.for?

Answer 1

Я знаю, что это старый, но только в том случае, , если это может помочь. Когда вы добавляете элементы DOM после переплета, они не являются aureliazed. Вы должны использовать метод повышения в TemplatingEngine:

1. импортируйте TemplatingEngine и ввести его:

   import {inject, TemplatingEngine} from 'aurelia-framework'; 
   @inject(TemplatingEngine) 
   

2. В конструкторе инициализировать двигатель шаблона:

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

3. в Аурелии attached(), сделайте свой материал для создания данных и добавьте класс, чтобы иметь возможность получить вновь созданный DOM элементы:

   $(nTd).html("<a class='myclass' ... 
   

4. Повысьте элементы:

   $('.myclass').each(function (index, value) { 
       let el = $(this); 
       if (!el.hasClass('au-target')) { //can't enhance already aureliazed elm 
       this.templatingEngine.enhance({element: el[0], bindingContext: this}); 
       //el[0] is important to have DOM and not jQuery object 
       } 
   }); 
   

Тогда ваше связывание должно работать.

Answer 2

С помощью первого подхода (связывание Aurelia), удалить данные из объекта конфигурации и загрузить данные в активировать жизненный цикл крюк:

import 'datatables'; 

export class UserList { 
    activate() { 
     this.records = [...]; 
    } 

    attached() { 
     $(this.tblUserList).dataTable(); 
    } 
}