流星 - 形式

在本章中，我们将学习如何使用 Meteor 表单。

文字输入

首先，我们将创建一个带有文本输入字段和提交按钮的表单元素。

流星App.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 文件中，我们将创建提交事件。我们需要阻止默认事件Behave来阻止浏览器刷新。接下来，我们将获取输入字段的内容并将其分配给textValue变量。

在以下示例中，我们仅将该内容记录到开发人员控制台。我们需要的最后一件事是清除输入字段。

流星App.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 = "";
      }
   });
}

当我们在输入字段中输入“Some text...”并提交时，控制台将记录我们输入的文本。

流星形式文本

单选按钮

类似的概念可用于单选按钮。

流星App.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>

流星App.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'submit form': function(event) {
         event.preventDefault();
         var radioValue = event.target.myForm.value;
         console.log(radioValue);
      }
   });
}

当我们提交第一个按钮时，控制台将显示以下输出。

流星形式电台

复选框

以下示例展示了如何使用复选框。你可以看到我们只是在重复同样的过程。

流星App.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>

流星App.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元素。每次选项更改时，我们将使用更改事件来更新数据。

流星App.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>

流星App.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'change select': function(event) {
         event.preventDefault();
         var selectValue = event.target.value;
         console.log(selectValue);
      }
   });
}

如果我们选择第三个选项，控制台将记录选项值。

流星形态选择