La soumission d'un formulaire dans le Météore sans l'aide d'extras

Je voudrais avoir un formulaire dans mon Météore modèle html et sur soumettre insérer les données de mon MongoDB liste. Mes questions sont les suivantes:

Est-ce possible sans l'aide de paquets supplémentaires? Je me permets d'ajouter un formulaire HTML en tant que modèle?
Ne l'événement submit travail pour les dernières Météore?
J'ai lu que l'on peut utiliser l'événement click du bouton de soumission: Pourriez-vous me dire comment je pourrais aller pour trouver dans mon DOM les valeurs de ma éléments d'entrée? (sans utiliser jQuery?)

OriginalL'auteur George Katsanos | 2013-03-04

JQuery est inclus dans le météore & très simplification, pourquoi voulez-vous l'éviter? Il est assez long pour traverser le dom manuellement avec js

Vous pouvez utiliser javascript pour soumettre vos formulaires ajax style:

De sorte que vous pouvez simplement utiliser la forme normale de html dans votre modèle comme d'habitude:

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

}

Vous pouvez lier le bouton select pour insérer les données lorsque l'utilisateur clique dessus:

Carte des événements de liaison:

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

Si vous HAINE jQuery & ne pouvez pas l'utiliser à tous les

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

eh bien, si je n'événement jQuery et jQuery DOM traversant ensuite, je devrais faire de jQuery, pas météore.. droit? Je veux dire, je voulais savoir si Meteor est efficace DOM de la traversée de lui-même..
Je ne serais pas vraiment dire meteor est un framework javascript comme ça, ce n'est pas construite pour remplacer l'JQuery plutôt à l'utilisation de tout mettre en place, il est toujours météore de mettre les données dans réactive avec la compensation de latence & jquery traversant les DOM. Ses inséré instantanément jquery qui ne serait pas le faire sur son propre. Meteor n'ont pas de DOM traversant choses, le guidon, le système de template, est également un cadre externe
Si le modèle arrive à avoir une seule forme, vous pouvez juste avoir un submit gestionnaire plutôt que click #submit. Aussi, vous pouvez faire $('#myform')[0].reset() plutôt que de réinitialiser manuellement tous les éléments de formulaire.
Merci @DavidWeldon. J'ai modifié le code pour tenir compte de cela.
J'ai aussi modifié le code il est donc purement javascript version trop. Pas de jquery.

OriginalL'auteur Akshat

11

Juste pour la référence, il est un peu le moyen le plus propre à faire des formes dans le Météore sans l'ensemble de ces jQuery références, que je trouve à être malpropre. Il rend le code beaucoup moins d'erreurs par la portée du modèle, qui est fourni dans le gestionnaire d'événements. Voici un exemple d'utilisation de la forme décrite dans l'autre réponse:

Code de modèle:
```
<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>
```
Gestionnaire d'événement:
```
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 */});

}});
```
Comment tu fais le sélecteur lorsque vous avez un bouton radio? Serait-il être un modèle.find( 'input:radio[nom="myNameForRadio"]:cochée()' ) ?
aussi, à l'aide de la Découvrir Meteor livre, ils utilisent $e.cible).find('[nom=prénom]').val() ; pouvez-vous nous expliquer la différence entre l'utilisation) $(e.cible) vs B) modèle ?
J'ai pensé à elle. Il y a juste les différents sélecteurs.
J'ai pensé à elle. Il existe différents sélecteurs. $e.cible).find(' ... ' ) utilise le .la valeur de la propriété, tandis que le modèle utilise le val() la méthode. Êtes-vous d'accord? (Je suis assez nouveau et d'essayer de faire bien sûr, je reçois la terminologie correcte). Notez que $(cible) ne fonctionne pas non plus.
c'est juste la différence entre le brut javascript sélecteur et de la fonctionnalité supplémentaire que jQuery fournit. Assurez-vous de distinguer entre ce que vous utilisez.

OriginalL'auteur Andrew Mao

La plus simple et la solution la plus simple de toutes.

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

Vous pouvez aussi simplement return false à partir de la fonction à la place de, y compris event.preventDefault(). À partir de la docs: "le Retour de faux à partir d'un gestionnaire est la même que l'appel à la fois stopImmediatePropagation et preventDefault sur l'événement."

OriginalL'auteur avishek gurung

Voulais partager ma façon c'est très 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>
  ...

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

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

Résultats dans agréable et propre Object {name: "...", email: "..."}

Et si vous êtes en utilisant SimpleSchema ne check(doc, Schemas.updateProfile); sur d'autre serveur pour validation.

OriginalL'auteur Mark Uretsky

Vous devez vous connecter pour publier un commentaire.