Render router's template to dynamic point in DOM

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);
  }
});