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

我正在写这个，所以它可能不会开箱即用，但它应该让你开始。我在这里成功地使用了类似的方法- 用于叠加。