Tabs 为Meteor中的选项卡创建可重用模板

所以我有一个这样的模板

<template name="tabs">
    <ul class='tabs'>
        <li activetab='tab1'>stream</li>
        <li activetab='tab2'>projects</li>
    </ul>
    <div>
        {{#if activeTabIs "tab1"}}
            {{> tabBody1}}
        {{/if}}
        {{#if activeTabIs "tab2"}}
            {{> tabBody2}}
        {{/if}}
    </div>
</template>

及

---

但是我想在整个页面上有多个这样的模板。他们不应该重复使用Session.get（“activeTab”），而是应该有自己的“范围”。如何实现这一点？

当Meteor UI推出时，这类事情有望变得更容易。现在，我要创建一个元模板，并使用一个助手来绘制它

<template name="tabs">
    <ul>
        {{#each tabs}}
            <li>{{name}}</li>
        {{/each}}
    </ul>
    {{currentTab}}
</template>


Template.tabs.currentTab = function() {
    var tab = _.find(this.data, function(t) {
        return t.active === true;
    });
    if(tab) return Template[tab.template]();
    return '';
}


<template name="something">
    {{#with tabList}}{{> tabs}}{{/with}}
</template>


Template.something.tabList = function() {
    return [
        {name: 'stream', template: 'stream'},
        {name: 'projects', template: 'projects', active: true},
    ];
}

{{{#每个标签}
{{name}}
{{/每个}}

{{currentTab}}
Template.tabs.currentTab=函数（）{
var tab=u.find（this.data，函数（t）{
返回t.active==true；
});
如果（制表符）返回模板[tab.Template]（）；
返回“”；
}
{{{with tabList}{{>tabs}{{{/with}}
Template.something.tabList=函数（）{
返回[
{name:'stream'，template:'stream'}，
{name:'projects'，template:'projects'，active:true}，
];
}

---

我是在脑子里写的，所以它可能不会开箱即用，但它应该能让你开始。我成功地使用了一种类似的方法——覆盖层。

当Meteor UI推出时，这种方法有望变得更容易。现在，我要创建一个元模板，并使用一个助手来绘制它

<template name="tabs">
    <ul>
        {{#each tabs}}
            <li>{{name}}</li>
        {{/each}}
    </ul>
    {{currentTab}}
</template>


Template.tabs.currentTab = function() {
    var tab = _.find(this.data, function(t) {
        return t.active === true;
    });
    if(tab) return Template[tab.template]();
    return '';
}


<template name="something">
    {{#with tabList}}{{> tabs}}{{/with}}
</template>


Template.something.tabList = function() {
    return [
        {name: 'stream', template: 'stream'},
        {name: 'projects', template: 'projects', active: true},
    ];
}

{{{#每个标签}
{{name}}
{{/每个}}

{{currentTab}}
Template.tabs.currentTab=函数（）{
var tab=u.find（this.data，函数（t）{
返回t.active==true；
});
如果（制表符）返回模板[tab.Template]（）；
返回“”；
}
{{{with tabList}{{>tabs}{{{/with}}
Template.something.tabList=函数（）{
返回[
{name:'stream'，template:'stream'}，
{name:'projects'，template:'projects'，active:true}，
];
}

---

我是在脑子里写的，所以它可能不会开箱即用，但它应该能让你开始。我成功地使用了类似的方法-用于覆盖层。

谢谢！我尝试了一些类似的方法（没有您的解决方案那么好），但我遇到的问题是，每当您切换一个选项卡时，整个选项卡都将重新呈现。这不是我想要的，因为我只想隐藏选项卡，并保持其“状态”。有什么想法吗？谢谢！我尝试了一些类似的方法（没有您的解决方案那么好），但我遇到的问题是，每当您切换一个选项卡时，整个选项卡都将重新呈现。这不是我想要的，因为我只想隐藏选项卡，并保持其“状态”。有什么想法吗？

<template name="tabs">
    <ul>
        {{#each tabs}}
            <li>{{name}}</li>
        {{/each}}
    </ul>
    {{currentTab}}
</template>


Template.tabs.currentTab = function() {
    var tab = _.find(this.data, function(t) {
        return t.active === true;
    });
    if(tab) return Template[tab.template]();
    return '';
}


<template name="something">
    {{#with tabList}}{{> tabs}}{{/with}}
</template>


Template.something.tabList = function() {
    return [
        {name: 'stream', template: 'stream'},
        {name: 'projects', template: 'projects', active: true},
    ];
}