流星-模板。构建简单目录

Question

我是Meteor新手，所以请不要因为愚蠢的问题而责怪我！我相当想在Google和Meteor.docs中找到答案，但我现在的愚蠢比我还强。

我正在尝试从两个 Collection 构建简单的产品目录。

Catalogs = new Mongo.collection('catalogs');
Products = new Mongo.collection('products');

我的目标是实现这样的视图：

Vegetables     <-- #1 catalog
  *Tomato      <-- product from #1 catalog
  *Cucumber    <-- another product from #1 ctalog
Fruits         <-- #2 catalog
  *Apple
  *Pineapple
  *Banana

我可以轻松创建目录并使用 parent ID 向其中添加产品。但现在我被 Meteor 模板困住了，不知道如何展示嵌套在 parent 目录中的产品。有时我用 Laravel 做类似的事情，在那种情况下我用 Laravel 的 Blade 检查每个产品，如下所示：

{{$catalog->name}}
    @foreach ($products as $product)
       @if ($catalog->id == $product->parentId)
         {{$product->name}}
       @endif
    @endforeach

我同意，也许这不是一个优雅的解决方案，但它对我有用。但是在 Meteor 中，随着 "data contexts" 的变化（如果我正确理解它们的作用），如果我无法获得 parent 或 child 属性，我无法掌握如何做这件事。我相信它一定有清晰直接的解决方法，但我自己看不到:(

拜托，你能帮我解决这个问题吗？

Answer 1

假设每个目录都有一个 name 并且每个产品都有一个 name 和一个 catalogId，下面是一个将所有目录和产品显示为一系列列表的模板：

<template name='catalogProducts'>
  {{#each catalogs}}
    <div class='catalog-name'>{{name}}</div>
    <ul>
      {{#each products}}
        <li>{{name}}</li>
      {{/each}}
    </ul>
  {{/each}}
</template>

Template.catalogProducts.helpers({
  catalogs: function() {
    // find all of the catalogs
    return Catalogs.find();
  },
  products: function() {
    // here the context is a catalog, so this._id is the id
    // of the current catalog - this finds all of its products
    return Products.find({catalogId: this._id});
  }
});

推荐阅读：A Guide to Meteor Templates & Data Contexts

流星-模板。构建简单目录

Meteor - templates. Building simple catalogue

meteor

spacebars