存儲會話單擊要更改UI

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> 

當用戶點擊一個特定的鏈接，我想存儲在會話中點擊只顯示在被點擊鏈接到特定模板時。例如，當我點擊「體育」時，我想要路由到「體育」模板，隱藏「音樂」和「服裝」鏈接，並且只保留新路線上的「體育」鏈接。當然，當用戶再次點擊菜單時，我想再次顯示所有鏈接。

我知道點擊必須存儲在會話中，但我不確定如何去選擇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

我覺得你需要一個單獨的模板，這是一個有點怪異的方式。

繼續向@蓋伊的回答是：

鏈接，存儲的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"); 
});