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 - 用于叠加。

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

1 个答案: