Meteor：如何在 html 页面上使用光标数组显示列表答案

【问题标题】：Meteor: how to display lists using an array of an array of cursors on the html pageMeteor：如何在 html 页面上使用光标数组显示列表
【发布时间】：2015-11-26 14:26:38
【问题描述】：

这个问题和this one here有关，这里我用成分-配方关系来表示Item和Group of Items之间的关系。成功插入项目和组后，每个组中的一个字段是项目 id 的数组，问题是我如何在关联的 html 页面上列出这些项目和组。

我尝试了下面的 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">&times;</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">&times;</button>
        <input type="checkbox" checked="{{checked}}" class="toggle-checked" />
        <li>
            <ul>
                {{#each this}}
                <li>{{ingredientName}}</li>
                {{/each}}
            </ul>
        </li>
    </li>
</template>

页面正确地显示了自己的项目/成分列表。但它无法显示组/食谱列表（或者更确切地说，目的是显示每个食谱的成分列表）。两个问题： 1. 为了在页面上显示菜谱，从 JS 代码返回游标数组是否可行？ 2.我在处理游标数组时做错了什么？

【问题讨论】：

标签： javascript html arrays mongodb meteor

【解决方案1】：

相关集合可以以非常直接的方式完成：

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 是一个单独的配方对象。

【讨论】：