Verwenden von jQuery DataTables mit Aurelia

Question

Ich brauche einen Rat bezüglich der Verwendung von jQuery DataTables mit Aurelia. Im Grunde laufe ich auf zwei Probleme.

1. Ich kann den besten Weg nicht finden, es zu initialisieren, nachdem die Bindungsschleife repeat.for abgeschlossen ist. Scheinbar funktioniert diese Schleife noch, auch nachdem der attached() Lebenszyklus ausgelöst wurde.
2. Wenn ich $(myRef).DataTables(data: myArray) Methode verwenden, um die Tabelle aufzufüllen und Verknüpfungen (<a href-route=... click.delegate=...>) in diese Tabelle einzufügen, scheint Aurelia die Verknüpfungen nicht zu erkennen oder den Router zu aktivieren.

Problem 1: Hier ist mein Versuch, die Tabelle zu füllen mit Aureliens Bindung. Aurelia macht die Tabelle korrekt, und ich kann nur 2-3 Sekunden warten und dann DataTables laden, aber das ist nicht der richtige Weg. Ich habe kein definitives Ereignis, um das Laden der DataTables-Klasse auszulösen, weil ich nicht weiß, wann repeat.for abgeschlossen ist.

<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> 

Problem 2: Hier ist mein Versuch die Tabelle mit der jQuery-Methode zu füllen. DataTables lädt die Tabelle erfolgreich, aber Aurelia erkennt die Verknüpfungen oder die Auslöseraktion nicht.

$(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' } 
    ] 
}); 

Kann mir jemand helfen, eines der oben genannten Probleme zu lösen? Oder ... nähere ich mich dem ganzen Thema auf die falsche Art? Ist es besser, die jQuery-Methode zum Auffüllen oder die Aurelia repeat.for Bindungsschleife zu verwenden?

Answer 1

Ich weiß, das ist alt, aber nur für den Fall , wenn es helfen kann. Wenn Sie nach dem Binden DOM-Elemente hinzufügen, sind sie nicht aureliazed. Sie sollten die Verbesserung der Methode von TemplatingEngine verwenden:

1. Import der TemplatingEngine und injizieren es:

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

2. im Konstruktor initialisieren die Template-Engine:

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

3. in Aureliens attached() Methode, tun Sie Ihre datatable-Init Zeug, und fügen Sie eine Klasse, um in der Lage sein, Ihre neu erstellten DOM abzurufen Elemente:

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

4. Ihre Elemente Verbesserung:

   $('.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 
       } 
   }); 
   

Ihre Bindung sollte dann funktionieren.

Answer 2

den ersten Ansatz (aurelia Bindung), entfernen Daten aus dem Config-Objekt und laden Sie Ihre Daten in dem aktivieren Lifecycle Haken:

import 'datatables'; 

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

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