Meteor - Dạng
Trong chương này, chúng ta sẽ học cách làm việc với các dạng Meteor.
Nhập văn bản
Đầu tiên, chúng tôi sẽ tạo form phần tử có trường nhập văn bản và nút gửi.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "text" name = "myForm">
<input type = "submit" value = "SUBMIT">
</form>
</template>Trong một tệp JavaScript, chúng tôi sẽ tạo submitbiến cố. Chúng tôi cần ngăn hành vi sự kiện mặc định để ngăn trình duyệt làm mới. Tiếp theo, chúng ta sẽ lấy nội dung của trường đầu vào và gán nó chotextValue Biến đổi.
Trong ví dụ sau, chúng tôi sẽ chỉ ghi nội dung đó vào bảng điều khiển dành cho nhà phát triển. Và điều cuối cùng chúng ta cần là xóa trường đầu vào.
meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var textValue = event.target.myForm.value;
console.log(textValue);
event.target.myForm.value = "";
}
});
}Khi chúng tôi nhập "Một số văn bản ..." vào trường nhập và gửi nó, bảng điều khiển sẽ ghi lại văn bản mà chúng tôi đã nhập.
Các nút radio
Một khái niệm tương tự có thể được sử dụng cho các nút radio.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "radio" name = "myForm" value = "form-1">FORM 1
<input type = "radio" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var radioValue = event.target.myForm.value;
console.log(radioValue);
}
});
}Khi chúng tôi gửi nút đầu tiên, bảng điều khiển sẽ hiển thị kết quả sau.
Hộp kiểm
Ví dụ sau đây cho thấy cách sử dụng hộp kiểm. Bạn có thể thấy rằng chúng tôi đang lặp lại quá trình tương tự.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<form>
<input type = "checkbox" name = "myForm" value = "form-1">FORM 1
<input type = "checkbox" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var checkboxValue1 = event.target.myForm[0].checked;
var checkboxValue2 = event.target.myForm[1].checked;
console.log(checkboxValue1);
console.log(checkboxValue2);
}
});
}Sau khi biểu mẫu được gửi, đầu vào đã kiểm tra sẽ được ghi lại là true, trong khi cái không được chọn sẽ được ghi lại là false.
Chọn menu thả xuống
Trong ví dụ sau, chúng ta sẽ học cách sử dụng selectthành phần. Chúng tôi sẽ sử dụngchange sự kiện cập nhật dữ liệu mỗi khi tùy chọn thay đổi.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<div>
{{> myTemplate}}
</div>
</body>
<template name = "myTemplate">
<select>
<option name = "myOption" value = "option-1">OPTION 1</option>
<option name = "myOption" value = "option-2">OPTION 2</option>
<option name = "myOption" value = "option-3">OPTION 3</option>
<option name = "myOption" value = "option-4">OPTION 4</option>
</select>
</template>meteorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'change select': function(event) {
event.preventDefault();
var selectValue = event.target.value;
console.log(selectValue);
}
});
}Nếu chúng ta chọn tùy chọn thứ ba, bảng điều khiển sẽ ghi lại giá trị tùy chọn.
