网站搜索

在 Typescript 类中访问 jquery 验证变量


目前我正面临以下问题,希望有人能帮我:

我正在使用 TypeScript 开发一个 aurelia-cli 应用程序。在我看来,aurelia-validation 并不是很好,而且过于复杂。所以我正在使用 jQuery-Validation。

我有以下类:

export class RegistrationForm{
    @bindable errors: string[];

    public attached(){
        let validator = $("#registration-form").validate({
            onfocusout: function (element) {
                $(element).valid();
            },
            errorPlacement: function(error, element){
                this.errors.push(error.text());
            }
        });
    }
}

以及以下模板:

<template>
  ...
  <ul if.bind="errors">
     <li repeat.for="error of errors">
         ${error}
     </li>
  </ul>
...
</template>

我知道,所示例子中使用 this.errors.push(error.text()) 是错误的,因为在那一刻我无法访问类变量 errors。

现在我的问题是,是否有可能将 error.text() 的信息传输到类变量,这样文本就可以在前端列出?

我的目标是,每次用户更改字段(失去焦点时),相应的字段都会被验证,并在页面顶部显示一条消息。显示应与 aurelia-binding 一起使用。

有人有办法解决这个问题吗?

答案#1

将你的 function() 改为箭头函数 =>,因为它们会保留声明时的作用域,因此 this 指向类而不是函数。

export class RegistrationForm{
    @bindable errors: string[];

    public attached(){
        let validator = $("#registration-form").validate({
            onfocusout: (element) => {
                $(element).valid();
            },
            errorPlacement: (error, element) => {
                this.errors.push(error.text());
            }
        });
    }
}