CODEWITHSUNDEEP
meteorcollections
jpeskin
jpeskin

Reputation: 2811

Meteor: how do you display a collection in multiple tables, where each table is a group of objects that have the same key value?

Say you have a bunch of blog posts, and each post has a "title" and "category". How would you render all post titles on a single page, where there is a table for each group of posts that have the same "category" values?

I'm starting by sorting by category, so the posts in the same category are grouped together in the cursor:

Template.postLists.posts = function() {
  return Posts.find({}, {sort:{category:1}});
}

But I'm struggling with iterating through this list in a template via {{#each}}, and using Handlebars to detect when I reach a new "category", so that I can start a new , and then end the when I'm at the end of the category.

Am I coming at this the wrong way, or is there an easy way to do this?

Upvotes: 0

Views: 972

Answers (1)

jpeskin
jpeskin

Reputation: 2811

The solution I went with was that in my Template handler, instead of returning a cursor using Posts.find(), I created a JSON object that has a structure that can be processed by a handlebars template (an array of category objects, where each category has an array of posts):

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;

The the template is something like this (but with tables instead of UL, just using UL for a cleaner demo here):

{{#each categorizedPosts}}
  {{category}}  
  <ul> 
    {{#each posts}}
    <li>{{posts.title}}</li>
    {{/each}}
  </ul>
{{/each}}

Note that when you return an object like this (instead of a cursor object that Posts.find() returns), Meteor's templating engine loses the ability to intelligently detect when only one of the objects in the collection has changed, and patching the DOM instead of completely re-rendering the template. So in this case, the template is completely re-rendered even if a single Posts object is updated in the DB. That's the downside. But the upside is that it works ;)

Upvotes: 1

Related Questions