Meteor:如何在html页面上使用光标数组显示列表
Meteor: how to display lists using an array of an array of cursors on the html page
这个问题与这里的这个问题有关,我使用配料配方关系来表示Item和Group of Items之间的关系。在成功插入Items和Groups之后,其中每个Group中的一个字段是Items的id数组,问题是如何在关联的html页面上列出这些Items和Group。
我尝试了下面的JS代码;对于项目,它返回一个直接的游标,对于组,它返回游标数组(由于有多个组)(每组有多个项目):
Recipes = new Mongo.Collection("recipes");
Ingredients = new Mongo.Collection("ingredients");
Template.body.helpers({
ingredients: function() {
// return
var returnedingredients = Ingredients.find({}, {
sort: {
createdAt: -1
}
});
// console.log(returnedingredients);
return returnedingredients;
},
recipes: function() {
//Show newest recipes at the top
var itemIds = Recipes.find({}, {
sort: {
createdAt: -1
},
// _id: 1
}).map(function(i) {
return i.itemIds;
});
// return
var returnedrecipes = _.map(itemIds, function(oneRecipe) {
var ingredientsOfRecipe = _.map(oneRecipe, function(itemId) {
return Ingredients.find({}, {
_Id: itemId
});
});
// console.log(ingredientsOfRecipe);
return ingredientsOfRecipe;
});
console.log(returnedrecipes);
return returnedrecipes;
},
});
关联的html代码。车身部分:
<h2>recipes</h2>
<ul>
{{#each recipes}} {{> recipe}} {{/each}}
</ul>
<h2>List of ingredients</h2>
<ul>
{{#each ingredients}} {{> ingredient}} {{/each}}
</ul>
模板部分:
<template name="ingredient">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<span class="text">{{ingredientName}}</span>
</li>
</template>
<template name="recipe">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox" checked="{{checked}}" class="toggle-checked" />
<li>
<ul>
{{#each this}}
<li>{{ingredientName}}</li>
{{/each}}
</ul>
</li>
</li>
</template>
页面会正确显示项目/成分的列表。但它没有显示组/食谱的列表(或者更确切地说,目的是显示每个食谱的配料列表)。两个问题:1。为了在页面上显示食谱,从JS代码中返回游标数组是一种方法吗?2.我在处理游标数组时做错了什么?
相关收集可以用一种非常简单的方式完成:
html:
<template name="ListOfRecipes">
<h2>Recipes</h2>
{{#each recipes}}
{{> recipe}}
<h3>Ingredients</h3>
{{#each ingredients}}
{{> ingredient))
{{/each}}
{{/each}}
</template>
js:
Template.listOfRecipes.helpers({
recipes: function(){
return Recipes.find({},{sort: {createdAt: -1}});
},
ingredients: function(){
return Ingredients.find({_id: {$in: this.itemIds}},{sort: {createdAt: -1}});
}
});
在ingredients
中,助手this
是一个单独的配方对象。
相关文章:
- 如何在映射数组中添加换行符
- javascript结合了数组和字典
- 需要帮助设置json数组
- 不能从angular2中的子组件指定父组件中的数组
- 使用JS将数组转换为json对象
- 数组在递归方法中设置为null
- knockoutjs可观察数组
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 将数组从PHP传递到Javascript
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 在函数中添加数组元素的数值
- 无法通过数组映射绑定
- javascript中的数组出错
- 如何使用 node.js 比较两个 json 数组
- Javascript(Angular)从一个对象数组到第二个数组查找值
- 根据id将json数组组合为一个json数组
- 如何通过数组更新角度子范围
- 检查鼠标光标是否在带坐标的数组范围内
- 如何使用另一个文档数组中的id对光标进行排序
- Meteor:如何在html页面上使用光标数组显示列表