Meteor:单击时向断开连接的模板发送信息

我正在尝试做一个单页应用程序，其中一个项目的任务栏是在点击一些链接时创建的，当点击任务栏上的任何项目时，它在DOM中有一个相应的div元素，必须隐藏或显示。因此，任务栏元素位于单独的模板中，而任务栏操作的div元素位于单独的模板中。我想可以简单地使用空格键设置display='block'或display='none'，具体取决于单击的任务栏项。但我面临的最大挑战是，如何将div元素的ID发送到事件处理程序或帮助器方法

需要隐藏或显示的div元素

<template name="currentDisplay">
{{#each dispElems}}
    <div id="{{this.elemId}}" display="{{this.dispType}}"></div>
{{/each}}
</template>

{{{{{}
{{/每个}}

任务栏或菜单项

<template name="siteHome">
<div id="topBar">
    <div id="navContainer">
        <ul id="navElems">
            <li id="nav1" class="userName">{{> Meteor.userId}}</li>
            <li id="nav0" class="logout">logout</li>
            <li id="nav2" class="nav">Home</li>
            <li id="nav3" class="nav">Files</li>
            <li id="nav4" class="nav">Comm</li>
        </ul>
    </div>
</div>
<div id="swapArea">
    {{> currentDisplay}}
</div>
</template>

{{{>Meteor.userId}
注销
主页
文件
通信

{{>currentDisplay}

我写了以下代码，但它不工作

var navElemsArray = ["nav1"];
var navElemsDispArray = ["disp-nav1"];
var navElemsSettingsArray = ["block"];
var incrementedIndex = 0;

var dispElems = new Mongo.Collection("dispElems");
dispElems.insert({elemId:"nav1", dispId: "disp-nav1", dispType: "block"});

Template.siteHome.events({
'click .logout': function (e, t) {
    Meteor.logout();
},
'click .nav': function (e, t) {
    var elemId = e.currentTarget.id;
    //console.log(navElemsArray);
    console.log(elemId);
    var currentElemIndex = _.indexOf(navElemsArray, elemId);
    console.log(currentElemIndex);
    if(currentElemIndex == -1)
    {
        dispElems.insert({elemId: elemId, dispId: "disp-"+elemId, dispType: "block"});

     /*   navElemsArray.push(elemId);
        navElemsArray.push("disp-"+elemId);
        navElemsSettingsArray.push("block");*/
        incrementedIndex++;
        console.log("INDEX= "+currentElemIndex);
        UI.insert(UI.render(Template.currentDisplay), $("#swapArea").get(0));
    }
    currentNavIndex = currentElemIndex;
    console.log("before loop");
/*        var dE = dispElems.find();
    dE.forEach(function (elem) {
        if(elem.elemId != incrementedIndex) elem.dispType = "none";
    });
*/
    /*
    for(i=0;i<navElemsArray.length;i++)
    {
        console.log("Setting for "+i);
        if(i == incrementedIndex)
        {
            console.log("Setting block for "+i);
            navElemsSettingsArray[i] = "block";
        }
        else
        {
            console.log("Setting none for "+i);
            navElemsSettingsArray[i] = "none";
        }
    }*/
}
}
});

var navElemsArray=[“nav1”]；
var navelemdisparray=[“disp-nav1”]；
var NavelemSettingsArray=[“块”]；
var incrementedIndex=0；
var DiseaseEMS=新的Mongo.集合（“DiseaseEMS”）；
insert（{elemId:“nav1”，dispId:“disp-nav1”，dispType:“block”}）；
Template.siteHome.events({
“单击.注销”：函数（e，t）{
Meteor.logout（）；
},
“click.nav”：函数（e，t）{
var elemId=e.currentTarget.id；
//控制台日志（导航阵列）；
控制台日志（elemId）；
var currentElemIndex=u.indexOf（Navelemarray，elemId）；
console.log（currentElemIndex）；
如果（currentElemIndex==-1）
{
insert（{elemId:elemId，dispId:“disp-”+elemId，dispType:“block”}）；
/*导航排列推进（elemId）；
导航排列推进（“disp-”+elemId）；
导航设置阵列推（“块”）*/
递增的索引++；
console.log（“INDEX=“+currentElemIndex”）；
UI.insert（UI.render（Template.currentDisplay），$（“#swapArea”）.get（0））；
}
currentNavIndex=currentElemIndex；
console.log（“循环前”）；
/*var dE=ems.find（）；
dE.forEach（功能（元素）{
如果（elem.elemId！=incrementedIndex）elem.dispType=“无”；
});
*/
/*
对于（i=0；i
要将id发送到模板，可以使用数据参数（）：

然后在currentDisplay模板中获取id：

Template.currentDisplay.rendered = function () {
     var id = this.data;
}

同意，导航选项卡可以为您完成所有这些。谢谢！但这有一个问题。我不需要选项卡。在使用导航功能时，是否可以将选项卡CSS删除？我读了更多关于它的内容。是否可以在我拥有的Swapera中保持在div之间切换？我如何做到？例如一个div用于主页，另一个div用于消息，而Home是act我隐藏了所有其他导航控制分区。。。
<div id="swapArea">
    {{>  Template.dynamic template=currentDisplay data = myDataHelper}}
</div>

    var incrementedIndex = 0;
    var elemId;

Template.siteHome.events({
        'click .nav': function (e, t) {
           elemId = e.currentTarget.id;
           .....
        }
    });

Template.siteHome.helpers({
     myDataHelper: function () {
          return elemID;
     }
});

Template.currentDisplay.rendered = function () {
     var id = this.data;
}