Aurelia-forms
提供:Dev Guides
アウレリア-フォーム
この章では、Aureliaフレームワークでフォームを使用する方法を学びます。
テキスト入力
最初に、 input フォームを送信する方法を確認します。 ビューには、ユーザー名とパスワードの2つの入力フォームがあります。 データバインディングには value.bind を使用します。
appl
<template>
<form role = "form" submit.delegate = "signup()">
<label for = "email">Email</label>
<input type = "text" value.bind = "email" placeholder = "Email">
<label for = "password">Password</label>
<input type = "password" value.bind = "password" placeholder = "Password">
<button type = "submit">Signup</button>
</form>
</template>
サインアップ機能は、入力からユーザー名とパスワードの値を取得し、開発者のコンソールに記録するだけです。
export class App {
email = '';
password = '';
signup() {
var myUser = { email: this.email, password: this.password }
console.log(myUser);
};
}
チェックボックス
次の例は、Aureliaフレームワークでチェックボックスを送信する方法を示します。 チェックボックスを1つ作成し、 checked 値をビューモデルにバインドします。
appl
<template>
<form role = "form" submit.delegate = "submit()">
<label for = "checkbox">Checkbox</label>
<input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
<button type = "submit">SUBMIT</button>
</form>
</template>
フォームの送信では、 checked 値がコンソールに記録されるだけです。
app.js
export class App {
constructor() {
this.isChecked = false;
}
submit() {
console.log("isChecked: " + this.isChecked);
}
}
ラジオボタン
次の例は、ラジオボタン*を送信する方法を示します。 構文 *repeat.for = "option of options" は、オブジェクトの配列を繰り返し、各オブジェクトのラジオボタンを作成します。 これは、Aureliaフレームワークで要素を動的に作成する適切な方法です。 残りは前の例と同じです。 model 値と checked 値をバインドしています。
appl
<template>
<form role = "form" submit.delegate = "submit()">
<label repeat.for = "option of options">
<input type = "radio" name = "myOptions"
model.bind = "option" checked.bind = "$parent.selectedOption"/>
${option.text}
</label>
<br/>
<button type = "submit">SUBMIT</button>
</form>
</template>
ビューモデルでは、オブジェクトの配列 this.options を作成し、最初のラジオボタンがチェックされるように指定します。 繰り返しますが、 SUBMIT ボタンは、ラジオボタンがオンになっているコンソールにログインするだけです。
app.js
export class PeriodPanel {
options = [];
selectedOption = {};
constructor() {
this.options = [
{id:1, text:'First'},
{id:2, text:'Second'},
{id:3, text:'Third'}
];
this.selectedOption = this.options[0];
}
submit() {
console.log('checked: ' + this.selectedOption.id);
}
}
3番目のラジオボタンをチェックしてフォームを送信すると、コンソールに表示されます。