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" : "";
};

重新渲染隐藏元素

1 个答案: