![](/img/trans.png)
[英]Meteor JS: How do I insert a document into a collection, but only on the client-side?
[英]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.