将角度指令移植到 aurelia

Question

我正在创建一个 aurelia 应用程序，并且最近购买了一个使用 angular 的模板。

该模板有大量用于 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

这应该可以解决问题，尽管this 可能存在一些需要纠正的范围问题。

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>