Постановка угловых директив на aurelia

Question

Я создаю приложение aurelia и недавно приобрел шаблон, который использует угловые.

Шаблон содержит большое количество директив для jquery/js-помощников для его страниц и элементов html.

Имея только начал изучать Aurelia Я не уверен, что правильный путь к порту их снова, вот пример

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

     } 
    } 

}) 

директива ориентирована на селектор CSS и добавление событий к нему.

Если это особый элемент? Может ли кто-нибудь указать мне в правильном направлении, как это должно выглядеть в aurelia?

Answer 1

Это должно сделать трюк, хотя могут возникнуть некоторые проблемы с, которые необходимо устранить.

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>