重新渲染隐藏元素

Question

我正在创建一个流星应用程序，该应用程序在页面的左半部分有一个可见的帖子列表，在右侧有一个隐藏的显示容器。用户点击帖子标题，显示容器变为页面右侧并显示完整帖子。现在，显示完整帖子的容器最初是隐藏的，只是其元素填充了车把表达式。如果您单击另一个帖子，相同的显示容器会保持打开状态，只是其内容发生了变化。

点击帖子

Template.postsList.events({
   'click .post': function (e, template) {
       e.preventDefault();
       Session.set('selectedPost', this._id);
   }
});

车把表达式示例

Template.postDisplay.title = function () {
   return Posts.findOne(Session.get('selectedPost')).title
}

除了显示容器的反应性之外，一切都运行良好。如果数据库中的某些内容发生更改（无论是添加的评论、标题的更改等），则显示将再次隐藏，我必须重新单击该帖子。 postsList 模板的所有值都正常且无缝地更新，没有任何闪烁或任何东西。

有没有办法让显示容器的值更新，同时防止它被隐藏？

这就是我展示容器的方式。只是常规的显示和隐藏。

在文件加载时

$('#post-display-container').hide();

点击元素

 $('.title').click(function () {
    $('#post-display-container').show()
 });

postDisplay 模板的示例。当然，我没有做全部事情。

<template name="postDisplay">
   {{#each posts}}
   <h3 class='title'>{{title}}</h3>
   <p class='body'>{{body}}</p>
   {{/each}}
</template>

模板助手

Template.postDisplay.helpers({
     posts: function () {
         return Posts.find(Session.get('selectedPost'));
     }
})

Answer 1

在 Meteor 文档中，在 session.equal 中，您可以看到单击所需帖子时要执行的操作。

将选择的课程添加到左侧的帖子中会提示当前选择的帖子。

在右侧，您也仅根据您的会话显示当前选定的帖子。点击时不要尝试显示帖子。考虑放置一些使该帖子出现的类。

为了清楚起见，您必须将您的帖子显示更改为类似于下面的显示，这样在重新渲染时课程仍然存在并且您的帖子（在右侧）仍然会显示。顺便说一句，在页面加载时删除 .hide() 并更改单击帖子时的行为以将会话更改为新的当前选定帖子。

<template name="postItem">
  <div class="{{postClass}}">{{title}}</div>
</template>

Template.postItem.postClass = function() {
   return Session.equals("selectedPost", this._id) ?
      "selected" : "";
};