繁体   English   中英

如何将集合插入流星的表单中

[英]how do I insert a collection into a form in meteor

我正在尝试制作一种基本的配方形式,里面有另一种形式。 内部形式使用集合。 我正在尝试将该集合输入较大的表格中。 我不确定如何在该特定部分上编写代码。

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>

通常我会从输入中使用他的name =“”,但在这种情况下我看不到它是如何工作的。 我也不需要它来导入删除按钮。 任何帮助都是极好的。

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

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

我必须重命名配方中的键以匹配字段名称,您的表单上没有“服务”,“成分”或“方向”元素。 不过,我认为这不是您要查找的内容。

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

您可以在配方中引用嵌入成分。 由于成分信息经常与配方信息一起使用,因此我建议嵌入成分,但是您首先需要使用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}}

提交表单后,我们将创建一个成分对象数组,然后将其作为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
         });
     }
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM