Ein Formular in Meteor ohne mit extras

Ich würde gerne ein Formular in meine Meteor html-Vorlage und auf "Absenden" einfügen, die Daten in meine MongoDB-Liste. Meine Fragen sind:

Ist das möglich ohne extra Pakete? Könnte ich fügen Sie einfach ein HTML-Formular als Vorlage?
Nicht auf die submit-Ereignis die arbeiten für die Letzte Meteor?
Ich das gelesen habe, können wir das click-Ereignis für die Schaltfläche "submit": Könnten Sie mir sagen, wie ich gehen würde, für die Suche nach in meine DOM die Werte meiner input-Elemente? (ohne die Verwendung von jQuery?)

InformationsquelleAutor George Katsanos | 2013-03-04

JQuery ist enthalten in meteor & sehr vereinfacht, warum würden Sie wollen, um es zu vermeiden? Seinen Recht lange zum Durchlaufen des dom-manuell mit js

Könntest du javascript verwenden, um senden Sie Ihre Formulare ajax-Stil:

So konnte man nur nutzen normalen Formular html-Code in Ihre Vorlage wie gewohnt:

//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 protected]'
    //}

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

}

Konnte Sie binden die select-Taste, um die Daten einfügen, wenn geklickt:

Event map Bindung:

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

Wenn Sie HASSE jQuery & nicht verwenden, es überhaupt

//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 protected]'
    //}

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

auch wenn ich jQuery event-und jQuery-DOM-Traversierung dann ich tun sollte, jQuery, nicht meteor.. richtig? Ich meine, ich wollte wissen, ob Meteor hat ein effizientes DOM-Traversierung selbst..
Ich würde nicht wirklich sagen, meteor ist ein javascript-framework wie, dass, es ist nicht gebaut, um zu ersetzen, JQuery eher zu verwenden, stellen Sie alles zusammen, es ist immer noch meteor setzen die Daten in reaktiv mit latency-compensation & jquery-Traversierung des DOM. Die eingefügten sofort die jquery würde nicht auf seine eigenen. Meteor hat noch keine DOM-Traversierung Zeug, LENKER, das templating system, ist auch ein äußerer Rahmen
Wenn die Vorlage passiert, nur eine form in der es Sie haben nur eine submit handler anstelle click #submit. Auch, Sie können tun $('#myform')[0].reset() anstatt manuell zurücksetzen aller Elemente bilden.
Danke @DavidWeldon. Ich veränderte den code, um dies zu reflektieren.
Ich habe auch veränderte den code so, dass es ist ein rein javascript-version zu. Kein jquery auf alle.

InformationsquelleAutor Akshat

11

Nur für die Referenz, es ist ein sauberer Weg, dies zu tun bildet in Meteor ohne die Globale jQuery-Referenzen, die ich finde, unordentlich zu sein. Es macht code viel weniger fehleranfällig, indem scoping auf die Vorlage, die in den Ereignis-handler. Hier ist ein Beispiel mit der form beschrieben, in der anderen Antwort:

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

}});
```
Wie machst du den selector wenn Sie einen radio-button? Würde es die Vorlage.find( 'input:radio[name="myNameForRadio"]:checked()' ) ?
auch mit dem Discover Meteor buchen, verwenden Sie $(. e.Ziel ist).find('[name=Vorname]').val() ; kannst du bitte erklären den Unterschied zwischen der Verwendung von A) $e.Ziel) vs B) Vorlage ?
Ich fand es heraus. Es gibt nur verschiedene Selektoren.
Ich fand es heraus. Es gibt verschiedene Selektoren. $e.Ziel ist).find(' ... ' ) verwendet .value-Eigenschaft, während die Vorlage verwendet die val () - Methode. Sind Sie damit einverstanden? (Ich bin ziemlich neu und versuchen, um sicherzustellen, bekomme ich die Terminologie richtig ist). Beachten Sie, dass $(target) funktioniert auch nicht.
das ist eben der Unterschied zwischen den raw-javascript-Selektor und die zusätzlichen Funktionen, die jQuery bietet. Stellen Sie sicher, zu unterscheiden zwischen denen man Sie verwenden.

InformationsquelleAutor Andrew Mao

Die einfachste und einfachste Lösung von allen.

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

Sie können auch einfach false zurückgeben von der Funktion aus, statt event.preventDefault(). Aus der docs: "Rückgabe von false durch ein hf das gleiche wie der Aufruf sowohl stopImmediatePropagation und preventDefault auf die Veranstaltung."

InformationsquelleAutor avishek gurung

Teilen wollte meinen Weg, es ist wirklich einfach:

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>
  ...

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

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

Ergebnisse in schön und sauber Object {name: "...", email: "..."}

Und wenn Sie SimpleSchema tun check(doc, Schemas.updateProfile); über ther-server für die Validierung.

InformationsquelleAutor Mark Uretsky

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.