用户界面-存储会话点击流星改变用户界面

Question

我在菜单中有一个链接列表：

<template name="menu">
<div id="menu">
    <a class="menu-list-item" id="sports" href="{{pathFor route='sports'}}">Sports</a>
    <a class="menu-list-item" id="music" href="{{pathFor route='music'}}">Music</a>
    <a class="menu-list-item" id="clothing" href="{{pathFor route='clothing'}}">Clothing</a>
</div>
</template>

当用户单击特定链接时，我希望将该单击存储在会话中，并在路由到特定模板时仅显示单击的链接。例如，当我点击"体育"时，我想路由到"体育"模板，隐藏"音乐"one_answers"服装"链接，并且只在新路由上维护"体育"链接。当然，当用户再次单击菜单时，我希望再次重新显示所有链接。

我知道点击必须存储在会话中，但我不确定如何选择id作为变量。

Answer 1

要设置会话，您需要以下内容：

Template.menu.events({
  'a click': function (event) {
    var id = event.currentTarget.id;
    Session.set('menuLinkId', id);
});

然后创建一个助手：

Template.menu.helpers({
  'currentMenu': function () {
     return Session.get('menuLinkId');
  }
});

并在您的模板中使用它：

{{#if currentMenu}}
<a class="menu-list-item" id="sports" href="{{pathFor route='sports'}}">Sports</a>
{{/endif}}

Answer 2

我觉得你需要一个单独的模板，这是一种有点麻烦的方式。

继续@Guy的回答：

单击链接后，将id存储在session中。

Template.menu.events({
  'click a': function (event) {
    var id = event.currentTarget.id;
    Session.set('menuLinkId', id);
});
Show new template on click(or new route) 

在新模板中，默认情况下，隐藏所有项目

<template name="newTemplate">
    <div id="menu">
        <a class="menu-list-item" id="sports" href="{{pathFor route='sports'}}" style="display:none">Sports</a>
        <a class="menu-list-item" id="music" href="{{pathFor route='music'}}" style="display:none">Music</a>
        <a class="menu-list-item" id="clothing" href="{{pathFor route='clothing'}}" style="display:none">Clothing</a>
    </div>
    //remaining content to show
</template>

默认情况下，我们隐藏所有链接和onRendered功能

Template.newTemplate.onRendered(function(){
   $("#"+Session.get("menuLinkId")).css("display","block");
});