Render router's template to dynamic point in DOM - meteor

Question

I wanna render show template into index template right after clicked element.
Some code(jade):
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
// render full post #1 here if link clicked
li
a(href="posts/2")= post.title
// render full post #2 here if link clicked
li
a(href="posts/3")= post.title
// render full post #3 here if link clicked
So I don't need to replace whole index template when user clicks show post link. I just need render show template right after link to this post.
Also I need to show only one post at same time, so if user clicks one post, then another, first one should be removed from DOM and second one should be rendered just in his place (right after show link).
How can I do that with meteor and Iron Router?

Answer 1

See Blaze.render or Blaze.renderWithData
Insert placeholders into your markup:
template(name="index")
ul
for post in posts
li
a(href="posts/1")= post.title
div(id="post1") // render full post #1 here if link clicked
li
a(href="posts/2")= post.title
div(id="post2") // render full post #2 here if link clicked
li
a(href="posts/3")= post.title
div(id="post3") // render full post #3 here if link clicked
Then setup your helpers:
Template.index.helpers({
'click a': function(ev){
... determine which link was clicked on
... pick the node to inject ex:
var node = $('#post2');
Blaze.render('postTemplate',node);
}
});

Answer 2

One way to do this would be to go ahead and render everything, but keep it hidden. Then you can add a click event handler that hides everything and shows only the thing that was clicked:
<template name='index'>
<ul>
{{#each posts}}
<li>
<a href='#' class='show-index-link' _id="{{_id}}"><!--Store _id so we can retrieve it in event handler-->
<div class='post-show-hide' id='post-show-hide-{{_id}}' style='display: none;'><!-- make it easy to select in the event handler-->
{{> post}}<!-- data context is the post in question -->
</div>
</li>
{{/each}}
</ul>
</template>
Then your event handler might look something like this:
Template.index.events({
'click .show-index-link': function(event) {
var _id = $(event.currentTarget).attr('_id'); // grab the ID of the post to show
event.preventDefault();
$('.post-show-hide').hide(); // hide all of them
$('#post-show-hide-' + _id).show(); // Show only the one we just clicked on
}
});
This seems the most straightforward way to accomplish this to me, but if you're concerned about the performance of sending all of the posts to the client, you could also consider having an event handler that subscribes to the post in question. That seems significantly more difficult (and if you're really worried about that sort of performance issue, you can get around it much more easily, e.g. with pagination), so unless you really need it, I'd stick to something simple like the solution above.