<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文件中，我們將創(chuàng)建 submit 事件。我們需要防止默認(rèn)事件的行為以停止刷新瀏覽器。下一步，我們要使用輸入字段的內(nèi)容，并將其文本值賦值給變量 textValue 。在這個(gè)例子中，我們只記錄了內(nèi)容輸出到開(kāi)發(fā)者控制臺(tái)。最后一件事是明確的輸入字段。

meteorApp/client/main.js

import { Template } from 'meteor/templating';
Template.myTemplate.events({
  'submit form': function(event){
     event.preventDefault();
     var textValue = event.target.myForm.value;
     console.log(textValue);
     event.target.myForm.value = "";
  }
});

當(dāng)我們?cè)谳斎霗谥墟I入“一些文字...”，然后點(diǎn)擊提交?？刂婆_(tái)將記錄下我們輸入的文本。

單選按鈕

類似的概念，我人使用單選按鈕。

meteorApp/import/ui/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/client/main.js

import { Template } from 'meteor/templating';
Template.myTemplate.events({
  'submit form': function(event){
     event.preventDefault();
     var radioValue = event.target.myForm.value;
     console.log(radioValue);
  }
});

當(dāng)我們提交的第一個(gè)按鈕，控制臺(tái)會(huì)顯示以下輸出。

Checkbox - 復(fù)選框

下面的例子演示了如何使用復(fù)選框?？梢钥吹轿覀冎皇侵貜?fù)同樣的過(guò)程。

meteorApp/import/ui/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/client/main.js

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);
  }
});

當(dāng)提交表單，雖然它們未選中一個(gè)那么將會(huì)被記錄為 false，如果有選中一個(gè)檢查輸入將被記錄為 true 。

下拉選項(xiàng)

在這個(gè)例子中，我們將展示如何使用select元素。我們將使用更改事件，以每次變化更新數(shù)據(jù)的選項(xiàng)。

meteorApp/import/ui/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/client/main.js

if (Meteor.isClient) {

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

}

如果選擇第三個(gè)選項(xiàng)，那么控制臺(tái)將記錄選項(xiàng)值。

上一篇：Meteor排序下一篇：Meteor Blaze

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Meteor表單

文本輸入

meteorApp/import/ui/meteorApp.html

meteorApp/client/main.js

單選按鈕

meteorApp/import/ui/meteorApp.html

meteorApp/client/main.js

Checkbox - 復(fù)選框

meteorApp/import/ui/meteorApp.html

meteorApp/client/main.js

下拉選項(xiàng)

meteorApp/import/ui/meteorApp.html

meteorApp/client/main.js