Portierung von Winkelanweisungen nach Aurelia

Question

Ich erstelle eine Aurelia-Anwendung und habe kürzlich eine Vorlage gekauft, die eckig verwendet.

Die Vorlage hat eine große Anzahl von Direktiven für jquery/js Helfer für seine Seiten und HTML-Elemente.

Nachdem aurelia Ich bin nicht sicher, dass der richtige Weg zum Hafen dieser über, hier ist ein Beispiel

.directive('fgLine', function(){ 
    return { 
     restrict: 'C', 
     link: function(scope, element) { 
      if($('.fg-line')[0]) { 
       $('body').on('focus', '.form-control', function(){ 
        $(this).closest('.fg-line').addClass('fg-toggled'); 
       }) 

       $('body').on('blur', '.form-control', function(){ 
        var p = $(this).closest('.form-group'); 
        var i = p.find('.form-control').val(); 

        if (p.hasClass('fg-float')) { 
         if (i.length == 0) { 
          $(this).closest('.fg-line').removeClass('fg-toggled'); 
         } 
        } 
        else { 
         $(this).closest('.fg-line').removeClass('fg-toggled'); 
        } 
       }); 
      } 

     } 
    } 

}) 

Die Richtlinie zielt auf ein CSS-Selektor und das Hinzufügen von Ereignissen zu lernen erst begonnen.

Sollte dies ein benutzerdefiniertes Element sein? Kann mir jemand in die richtige Richtung zeigen, wie das Aurelia aussehen soll?

Answer 1

Dies sollte den Trick machen, obwohl es einige Probleme mit dem Scoping mit this gibt, die behoben werden müssen.

fgLineCustomElement.js

import { inject } from 'aurelia-framework'; 

@inject(Element) 
export class FgLineCustomElement { 

    constructor(element) { 
     this.element = $(element); 
    } 

    attached() { 
     $('body').on('focus', '.form-control', function(){ 
      $(this).closest('.fg-line').addClass('fg-toggled'); 
     }) 

     // a more es6-ish approach 
     // $('body').on('focus', '.form-control',() => { 
     //  this.element.closest('.fg-line').addClass('fg-toggled'); 
     // }); 

     $('body').on('blur', '.form-control', function(){ 
      var p = $(this).closest('.form-group'); 
      var i = p.find('.form-control').val(); 

      if (p.hasClass('fg-float')) { 
       if (i.length == 0) { 
        $(this).closest('.fg-line').removeClass('fg-toggled'); 
       } 
      } 
      else { 
       $(this).closest('.fg-line').removeClass('fg-toggled'); 
      } 
     }); 
    } 
} 

app.html

<template> 
    <require from="fgLineCustomElement"></require> 
    <fg-line></fg-line> 
</template>