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

Question

我想在单击元素后立即将显示模板渲染到索引模板中。

一些代码（玉）：

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

所以我不需要在用户点击显示 post link 时替换整个索引模板。我只需要在 link 之后渲染显示模板到这个 post.

同时我只需要显示一个 post，所以如果用户点击一个 post，那么另一个，第一个应该从 DOM 中删除，第二个应该就在他的位置呈现（在演出后 link）。

如何使用 meteor 和 Iron Router 做到这一点？

Answer 1

实现此目的的一种方法是继续渲染所有内容，但将其隐藏。然后你可以添加一个点击事件处理程序来隐藏所有内容并只显示被点击的内容：

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

这对我来说似乎是最直接的方法，但如果您担心将所有 post 发送到客户端的性能，您也可以考虑使用一个事件处理程序订阅有问题的 post。这似乎要困难得多（如果你真的担心那种性能问题，你可以更容易地解决它，例如分页），所以除非你真的需要它，否则我会坚持一些简单的事情，比如上面的解决方案。

Answer 2

见Blaze.render or 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);
  }
});

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

Render router's template to dynamic point in DOM

meteor

iron-router