ดาวตก - ฟอร์ม
ในบทนี้เราจะเรียนรู้วิธีการทำงานกับแบบฟอร์ม Meteor
การป้อนข้อความ
ขั้นแรกเราจะสร้างไฟล์ form องค์ประกอบที่มีช่องป้อนข้อความและปุ่มส่ง
eorApp.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>ในไฟล์ JavaScript เราจะสร้างไฟล์ submitเหตุการณ์. เราจำเป็นต้องป้องกันพฤติกรรมเหตุการณ์เริ่มต้นเพื่อหยุดการรีเฟรชเบราว์เซอร์ ต่อไปเราจะนำเนื้อหาของช่องป้อนข้อมูลและกำหนดให้textValue ตัวแปร.
ในตัวอย่างต่อไปนี้เราจะบันทึกเนื้อหานั้นลงในคอนโซลนักพัฒนาเท่านั้น และสิ่งสุดท้ายที่เราต้องการคือการล้างช่องป้อนข้อมูล
eorApp.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 = "";
}
});
}เมื่อเราพิมพ์ "ข้อความบางส่วน ... " ในช่องป้อนข้อมูลและส่งไปคอนโซลจะบันทึกข้อความที่เราป้อน
ปุ่มวิทยุ
สามารถใช้แนวคิดที่คล้ายกันสำหรับปุ่มตัวเลือก
eorApp.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>eorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'submit form': function(event) {
event.preventDefault();
var radioValue = event.target.myForm.value;
console.log(radioValue);
}
});
}เมื่อเราส่งปุ่มแรกคอนโซลจะแสดงผลลัพธ์ต่อไปนี้
ช่องทำเครื่องหมาย
ตัวอย่างต่อไปนี้แสดงวิธีใช้ช่องทำเครื่องหมาย คุณจะเห็นได้ว่าเรากำลังทำกระบวนการเดิมซ้ำ
eorApp.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>eorApp.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);
}
});
}เมื่อส่งแบบฟอร์มข้อมูลที่เลือกจะถูกบันทึกเป็น trueในขณะที่รายการที่ไม่ได้เลือกจะถูกบันทึกเป็น false.
เลือกดรอปดาวน์
ในตัวอย่างต่อไปนี้เราจะเรียนรู้วิธีใช้ไฟล์ selectธาตุ. เราจะใช้ไฟล์change เหตุการณ์ในการอัปเดตข้อมูลทุกครั้งที่มีการเปลี่ยนแปลงตัวเลือก
eorApp.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>eorApp.js
if (Meteor.isClient) {
Template.myTemplate.events({
'change select': function(event) {
event.preventDefault();
var selectValue = event.target.value;
console.log(selectValue);
}
});
}หากเราเลือกตัวเลือกที่สามคอนโซลจะบันทึกค่าตัวเลือก
