如何在Meteor中渲染嵌套集合？

Question

简介:
嵌套在父类别中的子类别不会在Meteor模板中呈现.

详细信息:
考虑"类别"的数据模型:

// Model Schema
Category {
   idCategory : 20, (id of the category itself)
   idCategoryParent : 0, (idCategory of our parent category)
   defaultLabel : "Movies" (our label)
}

有父类别和子类别.父类别的idCategoryParent属性值为0.子类别将其父项的idCategory存储为其idCategoryParent属性.我正在尝试遍历这些类别的集合并以下列方式呈现它们:

<b>Movies</b> // parent category is in bold
<ul> // child categories are rendered as an unordered list
  <li>Horror</li> 
  <li>Comedy</li>
  <li>Action</li>
  <li>Drama</li>
</ul>

<b>Music</b>
<ul>
  <li>Rock</li> 
  <li>Classical</li>
  <li>Ambient</li>
</ul>

然而,这是我实际得到的:

<b>Movies</b>
<ul> // empty...
</ul>

<b>Music</b>
<ul>
</ul>

源代码:

// How we get the 'categories_parents' data
Template.content.categories_parents = function (){ 

    /*
    * Get all parent categories (categories with an idCategoryParent of 0)
    */
    var parents = Categories.find({idCategoryParent:0});
    var pCount = parents.count();

    for (var i = 0; i < pCount; i++){

            var pId = parents.db_objects[i]['idCategory'];
            /* 
            * Get all child categories of the parent (categories with
            * an idCategoryParent equal to value of parent category's idCategory).
            */
            var children = Categories.find({idCategoryParent:pId});
            var cCount = children.count();

            /*
            * Assign the child categories array as a property of the parent category
            * so that we can access it easily in the template #each expression
            */
            parents.db_objects[i]['children'] = children;
    }

    return parents;
}


// This is our template
<template name="content">
<h1>Categories</h1>
    {{#each categories_parents}}
        <b>{{defaultLabel}}</b><br />
        <ul>
            {{#each children}}
            <li>{{defaultLabel}}</li>
            {{/each}}
        </ul>
    {{/each}}
</template>

我在故障排除中尝试过的其他模板配置:

{{#each children}}
<li>A Child Exists Here</li> // Even this never rendered... no children?
{{/each}}

任何关于为什么会发生这种情况的线索将不胜感激.

Answer 1

你的模型有点不对......考虑一下

{name:"Category name", parent:"_id of parent category"}

好的,这更简单了.创建一个类别.

var moviesId = Categories.insert({name:"Movies"});
Categories.insert({name:"Horror",parent:moviesId});

这很容易.现在,以一种有效的方式呈现{{#each}}:

Template.categories.categories = function(parent) {
  if (parent) {
    return Categories.find({parent:parent}).fetch();
  } else {
    return Categories.find({parent:{$exists:false}});
  }
}

你可能会看到这是怎么回事......

<template name="categories">
   {{#each categories}}
   <ul>{{name}}
       {{#each categories _id}}
          <li>{{name}}</li>
       {{/each}}
   </ul>
   {{/each}}
</template>

现在我不确定{{#each}}块助手在调用另一个助手时是否可以使用函数参数.如果不...

Template.categories.categories = function() {
  return Categories.find({parent:{$exists:false}}).map(function(parentCategory) {
    return _.extend(parentCategory,
                    {children:Categories.find({parent:parentCategory._id}).fetch()});
  }); 
}

这真是太过分了.它返回具有新"children"列表属性的父类别,该属性包含所有子类别.现在你可以这样做:

<template name="categories">
   {{#each categories}}
   <ul>{{name}}
       {{#each children}}
          <li>{{name}}</li>
       {{/each}}
   </ul>
   {{/each}}
</template>

聪明,是吗？