Meteoro - Formas
En este capítulo, aprenderemos cómo trabajar con formas Meteor.
Entrada de texto
Primero, crearemos un form elemento con campo de entrada de texto y un botón de envío.
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>
En un archivo JavaScript, crearemos el submitevento. Necesitamos evitar el comportamiento de eventos predeterminado para evitar que el navegador se actualice. A continuación, tomaremos el contenido del campo de entrada y lo asignaremos atextValue variable.
En el siguiente ejemplo, solo registraremos ese contenido en la consola de desarrolladores. Y lo último que necesitamos es borrar el campo de entrada.
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 = "";
}
});
}
Cuando escribimos "Algún texto ..." en nuestro campo de entrada y lo enviamos, la consola registrará el texto que ingresamos.
Botones de radio
Se puede utilizar un concepto similar para los botones de opción.
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);
}
});
}
Cuando enviamos el primer botón, la consola mostrará el siguiente resultado.
Caja
El siguiente ejemplo muestra cómo utilizar las casillas de verificación. Puede ver que simplemente estamos repitiendo el mismo proceso.
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 vez que se envía el formulario, la entrada marcada se registrará como true, mientras que el desmarcado se registrará como false.
Seleccionar menú desplegable
En el siguiente ejemplo, aprenderemos a utilizar el selectelemento. Usaremos elchange evento para actualizar los datos cada vez que cambia la opción.
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);
}
});
}
Si elegimos la tercera opción, la consola registrará el valor de la opción.