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

Question

所以我有一个这样的模板

<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>

与

Template.tabs.events({
  'click .tabs li' : function (event, template) {
    Session.set("activeTab", $(event.currentTarget).attr("activetab"));
  }
});

和

Template.tabs.activeTabIs = function(tab) {
  return Session.get("activeTab") === tab;
}

但我希望在整个页面中都拥有多个这样的模板。他们不应该重复使用 Session.get("activeTab") 但可以说有自己的“范围”。我如何做到这一点？

Answer 1

当 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},
    ];
}

我是凭脑子写的，所以它可能无法开箱即用，但它应该能让你开始。我已经成功使用了类似的方法here - 用于叠加。