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 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> 

ボタンタイプsubmitを与えられた<form>にバインドすることができます以下のように表示または他の方法でアクセス可能

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 }) 
     } 
    } 
}