Meteor.js,基于表单的字段值显示集合的元素

时间:2019-07-03 07:59:54

标签: forms meteor meteor-blaze

我是流星的初学者,最近我开始用它开发应用程序。我目前有一个表格,可以让我为凭证分配受益人。但是,我希望能够将多个受益人动态添加到同一凭证中。为此,我使用两个集合:受益人集合(“受益人”)和凭证集合(“ bonsNuitees”)。原理如下:

-fill the fields corresponding to a beneficiary,
depending on the fields elements, display existing and matching beneficiaries or “new beneficiary” if he doesn’t exist (like a search bar),
-select the corresponding option (an existing beneficiary or a new beneficiary)
-press a button to add the option, display it on the page, empty the fields to add a new beneficiary,
-possibility to remove a beneficiary,
-once the voucher fields are filled, pressing a button submits the form by adding beneficiaries and the voucher to their own collection

bon-creer.html:

<template name="bonCreer">
    <div class="container">
        <header>
            <h1>Ajouter un bon de nuitée(s)</h1>
        </header>
        <form class="new-bon">
            <label>Nom :</label><input type="text" name="nom" /><br />
            <label>Prenom :</label><input type="text" name="prenom" /><br />
            <label>Né(e) le :</label><input type="date" name="date_naissance" /><br />
            <label>Typologie :</label><input type="text" name="typologie" /><br />
            <label>Nationalite :</label><input type="text" name="nationalite" /><br />
            <label>Statut :</label><input type="text" name="statut" /><br />

            <br>
            <label>Hôtel :</label><input type="text" name="hotel" ><br />
            <label>Chambres :</label><input type="text" name="chambres" ><br />
            <label>Date de début :</label><input type="date" name="date_debut" ><br />
            <label>Date de fin :</label><input type="date" name="date_fin" ><br />

            <button type="submit" onclick="alert('Création du bon...')">Ajouter</button>
        </form>
    </div>
</template>

bon-creer.js:

Template.bonCreer.helpers({
    beneficiaires () {
        return Beneficiaires.find({});
    },
    hotels () {
        return Hotels.find({});
    },
    bons() {
        return BonsNuitees.find({});
    },
});

Template.bonCreer.events({
    'submit .new-bon'(event) {

        event.preventDefault();

        var beneficiaires = [];
        var nbBeneficiaires = 1;

        ////// Bénéficiaires //////
        var nom = $("input[name='nom']").val();
        var prenom = $("input[name='prenom']").val();
        var date_naissance = $("input[name='date_naissance']").val();
        var typologie = $("input[name='typologie']").val();
        var nationalite = $("input[name='nationalite']").val();
        var statut = $("input[name='statut']").val();

        var beneficiaire = {
            nomB : nom,
            prenomB : prenom,
            date_naissanceB : date_naissance,
            ageB : 0,
            typologieB : typologie,
            nationaliteB : nationalite,
            statutB : statut
        };

        ////// Bon de nuitee(s) //////
        beneficiaires.push(beneficiaire);
        var hotel = $("input[name='hotel']").val();
        var chambres = $("input[name='chambres']").val();
        var date_debut = $("input[name='date_debut']").val();
        var date_fin = $("input[name='date_fin']").val();
        //var prix = $("input[name='prix']").val();

        var bon = {
            beneficiaires : beneficiaires,
            nomH : hotel,
            chambresH : chambres,
            date_debut : date_debut,
            date_fin : date_fin,
            //prix : prix
        };

        Beneficiaires.insert(beneficiaire);
        BonsNuitees.insert(bon);

        window.location.href="./bons-nuitees";
    },
});

对于第一步,我希望能够显示与“受益人”字段和“新受益人”匹配的我的集合的受益人。 请问你能帮帮我吗 ?甚至线索都可以。

0 个答案:

没有答案