forms - 在 Meteor 中提交表单而不使用附加功能

Question

我想在我的 Meteor html 模板中有一个表单，并在提交时将该数据插入到我的 MongoDB 列表中。我的问题是：

• 这可能不使用额外的软件包吗？我可以添加一个 HTML 表单作为模板吗？
• on submit 事件是否适用于最新的 Meteor？
• 我已经读到我们可以将 click 事件用于提交按钮：你能告诉我如何在我的 DOM 中查找我的输入元素的值吗？（不使用jQuery？）

Answer 1

JQuery 包含在流星中并且非常简化，为什么要避免它？用js手动遍历dom相当长

您可以使用 javascript 提交您的表单 ajax 样式：

因此，您可以像往常一样在模板中使用普通表单 html：

// HTML
<form id="myform">
    <input type="text" name="firstname"/>
    <input type="text" name="lastname"/>
    <input type="text" name="email"/>
    <input type="submit" id="submit"/>
</form>


// Client JS
function submitme() {
    form = {};

    $.each($('#myform').serializeArray(), function() {
        form[this.name] = this.value;
    });

    // Do validation on 
    // form = {
    //     firstname: 'first name',
    //     lastname: 'last name', 
    //     email: 'email@email.com'
    // }

    MyCollection.insert(form, function(err) {
        if(!err) {
            alert("Submitted!");
            $('#myform')[0].reset();
        } else {
            alert("Something is wrong");
            console.log(err);
        }
    });

}

您可以绑定选择按钮以在单击时插入数据：

Event map binding:

Template.templatename.events({
    'submit' : function(event) {
        event.preventDefault(); //prevent page refresh
        submitme();
    }
});

If you HATE jQuery & cant use it at all

// HTML
<form id="myform">
    <input id="firstname" type="text" name="firstname"/>
    <input id="lastname" type="text" name="lastname"/>
    <input id="email" type="text" name="email"/>
    <input type="submit" id="submit"/>
</form>

// Client JS
function submitme() {

    form = {
        firstname: firstname.value,
        lastname: lastname.value,
        email: email.value
    };

    // Do validation on 
    // form = {
    //     firstname: 'first name',
    //     lastname: 'last name',
    //     email: 'email@email.com'
    // }

    MyCollection.insert(form, function(err) {
        if (!err) {
            alert("Submitted!");

            // Empty field values
            email.value = "";
            firstname.value = "";
            lastname.value = "";
        } else {
            alert("Something is wrong");
            console.log(err);
        }
    });
}

Answer 2

Just for reference, there is a slightly cleaner way to do forms in Meteor without all the global jQuery references, which I find to be messy. It makes code a lot less error prone by scoping to the template, which is provided in the event handler. Here's an example using the form described in the other answer:

Template code:

<template name="foo">
    <form id="myform">
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="text" name="email"/>
        <input type="submit" id="submit"/>
    </form>
</template>

Event handler:

Template.foo.events({'submit form' : function(event, template) {
    event.preventDefault();

    firstname = template.find("input[name=firstname]");
    lastname = template.find("input[name=lastname]");   
    email = template.find("input[name=email]");

    // Do form validation

    var data = {
      firstname: firstname.value,
      lastname: lastname.value,
      email: email.value
    };

    email.value="";
    firstname.value="";
    lastname.value="";

    MyCollection.insert(data, function(err) { /* handle error */ });

}});

Answer 3

The most simple and easiest solution of all.

// HTML
<template name="formTemplate">
    <form>
        <input type="text" name="firstname"/>
        <input type="text" name="lastname"/>
        <input type="submit" id="submit"/>
    </form>
</template>

// JavaScript
Template.formTemplate.events({
    'submit form': function(event, template) {
        event.preventDefault(); // prevent page reload
        var firstname = event.target.firstname.value;
        var lastname = event.target.lastname.value; 
    }
});

Answer 4

Wanted to share my way it's real simple:

html:

<form id="update-profile">
  <div class="form-group">
    <input type="text" required class="form-control" name="name" placeholder="Full Name" value="{{profile.name}}">
  </div>
  ...

JS

Template.profileEditModal.events({
      'submit form': function (e, t) {
        e.preventDefault();
        var doc = {};

        t.$('input').each(function () {
          if (this.value) {
            doc[this.name] = this.value;
          }
        });
});

Results in nice and clean Object {name: "...", email: "..."}

And if you're using SimpleSchema do check(doc, Schemas.updateProfile); over ther server for validation.

Answer 5

This isn't exactly answering your question. But here's how I'd do it.

1. meteor add aldeed:autoform

2. sample schema you already have...

   Books = new Mongo.Collection("books");
   Books.attachSchema(new SimpleSchema({
     title: {
       type: String,
       label: "Title",
       max: 200
     },
     author: {
       type: String,
       label: "Author"
     },
     copies: {
       type: Number,
       label: "Number of copies",
       min: 0
     },
     lastCheckedOut: {
       type: Date,
       label: "Last date this book was checked out",
       optional: true
     },
     summary: {
       type: String,
       label: "Brief summary",
       optional: true,
       max: 1000
     }
   }));

3. books.tpl.jade (from mquandalle:jade)

+quickForm collection="Books" id="insertBookForm" type="method" meteormethod="insertBook"

4.

Meteor.methods({
  'insertBook': function (doc) {
      // server side validation, insert, error etc...
    }
})

This way you get client side validation for free, bootstrap styling for free, customise field visibility or styles if you need to. For 5 minutes of development, this is a pretty good return. I'd use the powerful packages that others have put time and thought into and build rapidly on top of that.