假设你有一堆博客帖子,每个帖子都有一个“标题”和“类别”。如何在一个页面上呈现所有帖子标题,其中每个帖子的表都有相同的“类别”值?
我首先按类别排序,因此同一类别中的帖子在光标中组合在一起:
Template.postLists.posts = function() {
return Posts.find({}, {sort:{category:1}});
}
但我正在努力通过{{#each}}在模板中遍历此列表,并使用Handlebars来检测我何时到达新的“类别”,以便我可以开始新的,然后结束当我在该类别的最后。
我是以错误的方式来到这里,还是有一种简单的方法可以做到这一点?
答案 0 :(得分:1)
我使用的解决方案是在我的模板处理程序中,而不是使用Posts.find()返回游标,我创建了一个JSON对象,其结构可以由把手模板(类别对象数组)处理,每个类别都有一系列帖子):
Template.postLists.categorizedPosts = function() {
var allPosts = Posts.find({}, {sort:{category:1}}).fetch();
// Then I iterate over allPosts with a loop,
// creating a new array of this structure:
// for ...
var catPosts = [ { category:"cat1", posts: [ {post1}, {post2} ] },
{ category:"cat2", posts: [ {post3}, {post4}, {post5} ] },
// etc...
];
// end loop
return catPosts;
模板是这样的(但是使用表而不是UL,只需使用UL进行更清洁的演示):
{{#each categorizedPosts}}
{{category}}
<ul>
{{#each posts}}
<li>{{posts.title}}</li>
{{/each}}
</ul>
{{/each}}
请注意,当您返回这样的对象(而不是Posts.find()返回的游标对象)时,Meteor的模板引擎会失去智能检测集合中只有一个对象何时发生更改和修补的能力DOM而不是完全重新渲染模板。因此,在这种情况下,即使在DB中更新了单个Posts对象,也会完全重新呈现模板。这是缺点。但好处是它有效;)