Question

我希望用户点击＆＃34;添加更多＆＃34;按钮成分名称和金额输入字段继续在页面上添加。当用户在填写所有其他字段后提交表单时，所有输入值包括成分名称和 Amount 字段将插入Recipes集合中。所以稍后我可以在 show_recipe 页面上显示含有其成分的完整食谱。我不确定是否必须添加成分名称和金额将字段值转换为其他集合以在show_recipe页面上显示它们。我怎么没有得到如何添加所有成分及其数量，然后在show_recipe页面上正确显示它们。您可以指导我如何做到这一点。完整的源代码是here

add_recipes.html

 <template name="add_recipes">
        <form  class="add_recipe">
            <div class="form-group">
                <label class="control-label" for="name" >Recipe Name</label>
                <input type="text" class="form-control" name="name" id="name" placeholder="Please Enter the Recipe name">
            </div>
            <div class="form-inline mb">
                <div class="form-group">

                    <label for="ingredient">Ingredient Name</label>
                    <input type="text" class="form-control" name="ingredient" id="ingredient" placeholder="Name">
                </div>
                <div class="form-group">
                    <label for="amount">Amount</label>
                    <input type="text" class="form-control" name="amount" id="amount" placeholder="Amount ">
                </div>
                <button  class="btn btn-default addMore">Add More</button>
            </div>
            <div class="form-group">
                <label class="control-label" for="des" >How to prepare</label>

                <textarea class="form-control" type="text" name="description" rows="3" id="des">
                </textarea>

            </div>
            <div class="form-group">
                <label class="control-label" for="time" >Time to prepare</label>

                <input class="form-control" type="number" name="time"  id="time" placeholder="Time required to make the recipe. (In Minutes)">

            </div>
            <div class="form-group">
                <label for="prodImg">Please Select the Image of your Recipe</label>
                <input type="file" id="recipeImage" name="recipeImage">
            </div>

            <div>
                <button type="submit" name="submit" class="btn btn-success "> Add Recipe</button>
                <a href="/" class="btn btn-default">Close</a>
            </div>
        </form>
    </template>

add_recipes.js

Template.add_recipes.events({
    'submit .add_recipe':function(event){
        var name = event.target.name.value ;
        var ingredient = event.target.ingredient.value ;
        var amount = event.target.amount.value ;
        var description = event.target.description.value ;
        var time= event.target.time.value ;
        var file = $('#recipeImage').get(0).files[0];
        if(file){
            fsFile = new FS.File(file);
            RecipesImages.insert(fsFile,function(err,result){
                if(!err){
                    var recipeImage = '/cfs/files/RecipesImages/'+ result._id;
                    Recipes.insert({
                        name:name,
                        description:description,
                        image:recipeImage,
                        time:time,
                        createdAt: new Date()
                    })
                }
            });

        } else{

            var recipieImage = '/img/noimage.png';

            Recipes.insert({
                name:name,
                description:description,
                image:recipesImages,
                time:time,
                createdAt: new Date()
            })
        }
        // Clear the form
        event.target.name.value  = "";
        event.target.ingredient.value = "";
        event.target.amount.value = "";

        event.target.description.value = "";
        event.target.time.value= "";
        FlashMessages.sendSuccess('Recipe Added',{ autoHide: true, hideDelay: 3000 });
        Router.go('/');
        event.preventDefault();
    }
})

Answer 1

我建议你使用Simple Schema和Autoform来实现这个

创建一个简单的架构

    ReceipeSchema = new SimpleSchema({
      // All the Other Properties as per your Requirement for "Add More" Feature use the below 
      ingredients: {
        type: [Object],
        minCount: 1
      },
,
    "ingredients.$.Name": {
        type: String
    },
    "ingredients.$.amount": {
        type: String
    }
    });

将SimpleSchema附加到像这样的集合

Receipe.attachSchema(ReceipeSchema );

然后在你的Html中添加

<template name="insertReceipeForm">
  {{> quickForm collection="Receipe" id="insertReceipeForm" type="insert"}}
</template>

Viola !!您将自动查看加号按钮以包含任意数量的成分，并将其存储为数组。

有关的更多信息 SimpleSchema https://github.com/aldeed/meteor-simple-schema

Collection2 https://github.com/aldeed/meteor-collection2

Autoform https://github.com/aldeed/meteor-autoform

快乐编码!!

具有多个字段的表单提交

1 个答案: