gpt4 book ai didi

javascript - 如何在 Meteor 中渲染嵌套集合?

转载 作者:搜寻专家 更新时间:2023-11-01 04:50:43 26 4
gpt4 key购买 nike

总结:
嵌套在父类别中的子类别不会在 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}}

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

最佳答案

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

{name:"类别名称", parent:"父类别的_id"}

好吧,这就简单多了。创建类别。

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}} block 助手在调用另一个助手时是否可以接受函数参数。如果没有...

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

这真是个傻瓜。它返回带有新“子”列表属性的父类别,其中包含所有子类别。现在您可以:

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

聪明,嗯?

关于javascript - 如何在 Meteor 中渲染嵌套集合?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13750854/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com