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

Question

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

这可能不使用额外的软件包吗？我可以添加一个 HTML 表单作为模板吗？

on submit 事件是否适用于最新的 Meteor？

我已经读到我们可以将 click 事件用于提交按钮:你能告诉我如何在我的 DOM 中查找我的输入元素的值吗？ (不使用 jQuery？)

Answer 1

JQuery 包含在 meteor 中并且非常简化，为什么要避免它？用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);
        }
    });

}

您可以绑定(bind)选择按钮以在单击时插入数据:

事件映射绑定(bind):

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

如果你讨厌 jQuery 并且根本无法使用它

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