Question

我正在尝试创建单页应用，其中在单击某些链接时创建项目任务栏，当单击任务栏上的任何项目时，它在DOM中具有必须隐藏或显示的相应div元素。因此任务栏元素位于单独的模板中，任务栏操作的div元素位于单独的模板中。我想过能够简单地设置display =＆＃39; block＆＃39;或显示=＆＃39;无＆＃39;根据单击的任务栏项目使用空格键。但我面临的最大挑战是，如何将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>

我写了以下代码，但它没有用。

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";
        }
    }*/
}
}
});

任何提示都表示赞赏。

Answer 1

<div id="swapArea">
    {{>  Template.dynamic template=currentDisplay data = myDataHelper}}
</div>

要将ID发送到模板，您可以使用数据参数（example）：

    var incrementedIndex = 0;
    var elemId;

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

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

拥有像

这样的变量ID

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

然后在currentDisplay模板中获取id：

result

Meteor：在点击时向断开连接的模板发送信息

1 个答案: