Aurelia

Question

简单的问题。

我有一个登录模板 - 用户名和密码的表单：

<template>
<section>
    <h2>${heading}</h2>

    <form role="form" submit.delegate="login()">
        <div class="form-group">
            <label for="userName">User Name</label>
            <input type="text" value.bind="userName" class="form-control" id="userName" placeholder="User Name">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" value.bind="password" class="form-control" id="password" placeholder="Password">
        </div>
        <button type="button"  click.delegate="submitLogin()" class="btn btn-default">Login</button>
    </form>

    <hr>
    <div class="alert alert-danger" if.bind="loginError">${loginError}</div>
</section>

我环顾四周以了解如何在我的 login.ts 文件中访问这些变量。

特别是我希望在按下按钮登录后最终将它们发送到 api。

我有一个 submitLogin() 函数，但我不知道您如何访问变量用户名和密码。

谁能告诉我如何访问这些变量。

我得到了用户名和密码的红色下划线..

        import { HttpClient } from "aurelia-fetch-client";
        import { autoinject } from "aurelia-framework";
        import { TokenService } from "../tokenService";

        @autoinject
        export class Login {
            http: HttpClient;
          tokenService: TokenService;

          heading = "Login";


          constructor(tokenService: TokenService, http: HttpClient, ) {
            this.tokenService = tokenService;
            this.http = http;
          }

          public submitLogin(): void {


              console.log("userName, Password", this. userName, this.password);
          }
        }

Answer 1

表单提交逻辑可以绑定到 <form> 给定按钮类型 submit

本身

<form  role="form" submit.delegate="submitLogin()">
    <div class="form-group">
        <label for="username">User Name</label>
        <input type="text" value.bind="username" class="form-control" id="username" placeholder="User Name">
    </div>
    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" value.bind="password" class="form-control" id="password" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-default">Login</button>
</form>

您可以使 class 字段可从视图或其他方式访问，如下所示

import { HttpClient } from "aurelia-fetch-client"
import { autoinject } from "aurelia-framework"
import { TokenService } from "../tokenService"

@autoinject
export class Login {
    heading: string = "Login"
    username: string = ''
    password: string = '' // these are pubic fields available in your view unless you add 'private' in front of them

    constructor(private tokenService: TokenService, private http: HttpClient) { // this way you can keep them private since they are not needed in the view

    }

    submitLogin() {
        const { username, password } = this
        if (!!username && !!password) { // or your validations
            this.tokenService.login({ username, password })
        }
    }
}

Aurelia - 无法访问我的模板中的变量

Aurelia - Unable to access variables in my template