Meteor - Forms
In questo capitolo impareremo come lavorare con i moduli Meteor.
L'immissione di testo
Innanzitutto, creeremo un file form elemento con campo di immissione del testo e un pulsante di invio.
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>In un file JavaScript, creeremo il file submitevento. È necessario impedire il comportamento dell'evento predefinito per impedire l'aggiornamento del browser. Successivamente, prenderemo il contenuto del campo di input e lo assegneremo atextValue variabile.
Nel seguente esempio, registreremo solo quel contenuto nella console degli sviluppatori. E l'ultima cosa di cui abbiamo bisogno è cancellare il campo di input.
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 = "";
}
});
}Quando digitiamo "Some text ..." nel nostro campo di input e lo inviamo, la console registrerà il testo che abbiamo inserito.
Tasti della radio
Un concetto simile può essere utilizzato per i pulsanti di opzione.
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);
}
});
}Quando inviamo il primo pulsante, la console mostrerà il seguente output.
Casella di controllo
L'esempio seguente mostra come utilizzare le caselle di controllo. Puoi vedere che stiamo solo ripetendo lo stesso processo.
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);
}
});
}Una volta inviato il modulo, l'input controllato verrà registrato come true, mentre quello deselezionato verrà registrato come false.
Seleziona Dropdown
Nell'esempio seguente, impareremo come utilizzare il selectelemento. Useremo il filechange evento per aggiornare i dati ogni volta che l'opzione cambia.
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);
}
});
}Se scegliamo la terza opzione, la console registrerà il valore dell'opzione.
