How to access another collection by ID in Meteor template?

Question

Let's say I have a Posts collection, the data for which looks like this:

var post1 = {
  title: "First post",
  post: "Post content",
  comments: [<comment id>, <another comment id>, <etc>]
};

And I have a corresponding Comments collection. I've published and subscribed to both collections and want to display a post with it's comments.

How do I go about displaying the comments for that specific post?

<template name="post">
  <h1>{{title}}</h1>
  <p>{{post}}</p>
  {{#each comments}}
    // Only have access to the ID
  {{/each}}
</template>

I could create a helper like this:

Template.post.helpers({
  displayComment: function(id) {
    return Comments.findOne(id).fetch().comment;
  }
});

and do:

<template name="post">
    <h1>{{title}}</h1>
    <p>{{post}}</p>
    {{#each comments}}
      {{displayComment @index}}
    {{/each}}
  </template>

But then I'd have to create a helper for each of the comment object's properties, etc.

What's the clean way to do it? I don't want to populate the comments field on the post object, since that would mean calling .fetch(), and posts would no longer be reactive.

Answer 1

A couple of suggestions:

<template name="post">
  <h1>{{title}}</h1>
  <p>{{post}}</p>
  {{#each comments}}
    {{#with commentDetails}}
        {{userName}} //
        {{content}}  //  These are properties of a comment document
        {{upvotes}}  //
    {{/with}}
  {{/each}}
</template>

Template.post.helpers({
    commentDetails: function() {
        return Comments.findOne(this);
    }
});

That will set the data context within each with block to be the comment object returned by looking up the current _id (which is the value of this in the commentDetails helper within the each block).

An alternative would be to just use an each block on its own, but have it iterate over a cursor:

<template name="post">
  <h1>{{title}}</h1>
  <p>{{post}}</p>
  {{#each commentCursor}}
    {{content}}
    ... // other properties
  {{/each}}
</template>

Template.post.helpers({
    commentCursor: function() {
        return Comments.find({_id: {$in: this.comments}});
    }
});