Question

我正在尝试制作一个基本的食谱表单，其中包含另一种形式。内部表单使用集合。我试图将该集合输入更大的形式。我不知道如何在该特定部分编写代码。

Ingredients = new Mongo.Collection('ingredients');
Recipe = new Mongo.Collection('recipe');

    'submit .recipe_submit': function(event){

        Recipe.insert({
            recipeServing:event.target.mealserving.value,
            recipeIngredients:event.target.,
            recipeDirection:event.target.recipedirections.value

        })
    }


 <template name="addingredients">
         <h2>Enter Ingredients</h2>
                 <form class="form-group">
                     Food Item</span><input name="ingredientType" type="text">
                     Quantity</span><input name="ingredientQuantity" type="text">
                     Amount</span><input name="ingredientAmount" type="text" >
                    <button type="submit">Add</button>
                 </form>
                 <div class="col-md-12">
                     <ul>
                         {{#each ingredients}}
                             <li >
                                 <div>
                                     <div>{{this.foodItem}}</div>
                                     <div>{{this.foodQuantity}}</div>
                                     <div>{{this.foodAmount}}</div>
                                     <div class="delete"></div>
                                </div>
                             </li>
                         {{/each}}
                     </ul>
                 </div>

 </template>

通常我会使用他的名字=＆＃34;＆＃34;从输入，但我不知道在这种情况下如何工作。我也不需要它来导入删除按钮。任何帮助都会很棒。

Answer 1

您的活动需要正确提取每个值。以下是您可以执行此操作的示例：

Template.addingingredients.events({
    'submit .recipe_submit': function(event, template){

        Recipe.insert({
            recipeType: template.$("input[name=ingredientType]").val(),
            recipeQuantity: template.$("input[name=ingredientQuantity]").val(),
            recipeAmount: template.$("input[name=ingredientAmount]").val()
        })
    }
});

我必须重命名食谱中的键以匹配字段名称，您的表单上没有“服务”，“成分”或“方向”元素。不过，我不认为这是你在问题中寻找的东西。

关键点是，如果您想从元素中提取值，可以使用类似$("input[name=ingredientQuantity]").val()的元素来获取<input name="ingredientQuantity" type="text"/>等元素的值

Answer 2

您可以在食谱中添加reference或embed成分。由于配料信息经常与配方信息一起使用，我建议嵌入配料，但您首先需要使用JQuery从内部形式中获取成分，这需要可区分的选择器：

{{#each ingredients}}
    <li class="ingredient">
        <div class="item">{{this.foodItem}}</div>
        <div class="quantity">{{this.foodQuantity}}</div>
        <div class="amount">{{this.foodAmount}}</div>
        <div class="delete"></div>
    </li>
{{/each}}

提交表单后，我们创建一个Ingredient对象数组，然后将它们作为Recipe的属性嵌入：

Template.addingingredients.events({
    'submit .recipe_submit': function(event, template){

         var ingredients = [];

         $("li.ingredient").each(function() {
             var selector = this;
             ingredients.push({
                 foodItem: $(selector).find(".item").text(),
                 foodQuantity: $(selector).find(".quantity").text(),
                 foodAmount: $(selector).find(".amount").text()
             });
         });

         Recipe.insert({
             recipeServing: event.target.mealserving.value,
             recipeIngredients: ingredients,
             recipeDirection: event.target.recipedirections.value
         });
     }
});

如何在流星中将一个集合插入表单中

2 个答案: