Aurelia - Biểu mẫu
Trong chương này, bạn sẽ học cách sử dụng các biểu mẫu trong khung công tác Aurelia.
Nhập văn bản
Đầu tiên, chúng ta sẽ xem cách gửi inputhình thức. Chế độ xem sẽ có hai mẫu đầu vào cho tên người dùng và mật khẩu. Chúng tôi sẽ sử dụngvalue.bind để ràng buộc dữ liệu.
app.html
<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>
Chức năng đăng ký sẽ chỉ lấy giá trị tên người dùng và mật khẩu từ các đầu vào và đăng nhập vào bảng điều khiển của nhà phát triển.
export class App {
email = '';
password = '';
signup() {
var myUser = { email: this.email, password: this.password }
console.log(myUser);
};
}
Hộp kiểm
Ví dụ sau sẽ trình bày cách gửi hộp kiểm với khung Aurelia. Chúng tôi sẽ tạo một hộp kiểm và liên kếtchecked giá trị đối với mô hình xem của chúng tôi.
app.html
<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>
Gửi biểu mẫu sẽ chỉ ghi lại checked giá trị trong bảng điều khiển.
app.js
export class App {
constructor() {
this.isChecked = false;
}
submit() {
console.log("isChecked: " + this.isChecked);
}
}
Các nút radio
Ví dụ sau sẽ trình bày cách gửi radio buttons. Cú pháprepeat.for = "option of options"sẽ lặp lại qua một mảng đối tượng và tạo một nút radio cho từng đối tượng. Đây là một cách gọn gàng để tạo động các phần tử trong khung công tác Aurelia. Phần còn lại giống như trong các ví dụ trước. Chúng tôi đang ràng buộcmodel và checked các giá trị.
app.html
<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>
Trong mô hình khung nhìn của chúng tôi, chúng tôi sẽ tạo một mảng các đối tượng this.optionsvà chỉ định rằng nút radio đầu tiên được chọn. Một lần nữa,SUBMIT sẽ chỉ đăng nhập vào bảng điều khiển mà nút radio được chọn.
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);
}
}
Nếu chúng tôi kiểm tra nút radio thứ ba và gửi biểu mẫu của mình, bảng điều khiển sẽ hiển thị nó.