Meteor-フォーム

この章では、Meteorフォームの操作方法を学習します。

テキスト入力

まず、作成します form テキスト入力フィールドと送信ボタンを備えた要素。

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>

JavaScriptファイルで、 submitイベント。ブラウザの更新を停止するには、デフォルトのイベント動作を防止する必要があります。次に、入力フィールドの内容を取得して、に割り当てます。textValue 変数。

次の例では、そのコンテンツのみを開発者コンソールに記録します。そして最後に必要なのは、入力フィールドをクリアすることです。

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

入力フィールドに「Sometext ...」と入力して送信すると、コンソールは入力したテキストをログに記録します。

ラジオボタン

同様の概念をラジオボタンにも使用できます。

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

最初のボタンを送信すると、コンソールに次の出力が表示されます。

チェックボックス

次の例は、チェックボックスの使用方法を示しています。同じプロセスを繰り返していることがわかります。

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

フォームが送信されると、チェックされた入力は次のようにログに記録されます true、チェックされていないものはとしてログに記録されます false

ドロップダウンを選択

次の例では、の使用方法を学習します。 select素子。を使用しますchange オプションが変更されるたびにデータを更新するイベント。

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

3番目のオプションを選択すると、コンソールはオプション値をログに記録します。