Question

我想在点击元素之后立即将show template渲染到索引模板中。

一些代码（玉）：

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

因此，当用户点击显示帖子链接时，我不需要替换整个索引模板。我只需要在链接到这篇文章后立即使用渲染展示模板。

此外，我需要同时只显示一个帖子，所以如果用户点击一个帖子，那么另一个帖子应该从DOM中移除，第二个应该只在他的位置（在显示链接之后）。 / p>

我怎么能用流星和铁路由器做到这一点？

Answer 1

请参阅Blaze.render或Blaze.renderWithData

将占位符插入到标记中：

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

然后设置你的助手：

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

执行此操作的一种方法是继续渲染所有内容，但将其隐藏起来。然后，您可以添加一个隐藏所有内容的Click事件处理程序，并仅显示已单击的内容：

<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>

然后您的事件处理程序可能如下所示：

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

这似乎是向我完成此操作的最简单方法，但如果您关注将所有帖子发送到客户端的性能，您还可以考虑使用一个订阅该帖子的事件处理程序题。这似乎要困难得多（如果你真的担心这种性能问题，你可以更轻松地绕过它，例如用分页），所以除非你真的需要它，否则我会坚持像上面的解决方案一样简单。

将路由器的模板渲染到DOM中的动态点

2 个答案: