J'ai besoin de quelques conseils concernant l'utilisation de jQuery DataTables avec Aurelia. Fondamentalement, je rencontre deux problèmes.

  1. Je ne peux pas déterminer la meilleure façon de l'initialiser APRÈS la fin de la boucle de liaison repeat.for. Apparemment, cette boucle fonctionne toujours même après le déclenchement du cycle de vie attached().
  2. Si j'utilise la méthode $(myRef).DataTables(data: myArray) pour remplir la table et insérer des liens (<a href-route=... click.delegate=...>) dans cette table, Aurelia ne semble pas reconnaître les liens ou activer le routeur.

Problème 1: Voici ma tentative de remplir le tableau à l'aide de la liaison d'Aurelia . Aurelia fait correctement la table, et je peux simplement attendre 2-3 secondes, puis charger DataTables, mais ce n'est pas la bonne façon. Je n'ai pas d'événement définitif pour déclencher le chargement de la classe DataTables car je ne sais pas quand repeat.for est terminé.

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

Problème 2: Voici ma tentative de remplir le tableau à l'aide de la méthode jQuery . DataTables charge la table avec succès, mais Aurelia ne reconnaît pas les liens ou ne déclenche pas l'action.

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

Quelqu'un peut-il m'aider à résoudre l'un des problèmes ci-dessus? Ou ... est-ce que j'aborde cette question dans le mauvais sens? Est-il préférable d'utiliser la méthode jQuery pour remplir ou la boucle de liaison Aurelia repeat.for?

0
LStarky 17 janv. 2017 à 15:41

2 réponses

Meilleure réponse

Je sais que c'est vieux, mais juste au cas où, si cela peut aider. Lorsque vous ajoutez des éléments DOM après la liaison, ils ne sont pas aureliazed . Vous devez utiliser la méthode d’amélioration de TemplatingEngine:

  1. importez le TemplatingEngine et injectez-le:

    import {inject, TemplatingEngine} from 'aurelia-framework';
    @inject(TemplatingEngine)
    
  2. Dans le constructeur, initialisez le moteur de modèle:

    constructor(templatingEngine) {
        this.templatingEngine = templatingEngine;
    }
    
  3. dans la méthode attached() d'Aurelia, faites vos trucs d'initialisation datables et ajoutez une classe pour pouvoir récupérer vos éléments DOM nouvellement créés:

    $(nTd).html("<a class='myclass' ...
    
  4. Améliorez vos éléments:

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

Ensuite, votre liaison devrait fonctionner.

1
clemens 29 déc. 2017 à 16:22

En utilisant la première approche (liaison aurelia), supprimez les données de l'objet de configuration et chargez vos données dans le hook de cycle de vie activate :

import 'datatables';

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

    attached() {
        $(this.tblUserList).dataTable();
    }
}
1
Rabah 18 janv. 2017 à 10:49