Create a reusable template for tabs in Meteor

问题

So I have a template like this

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

with

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

and

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

But I want to have multiple of these templates all over the page. They should not re-use the Session.get("activeTab") but have their own 'scope' so to say. How do I achieve this?

回答1:

This is the kind of thing that will hopefully get easier when Meteor UI is out. For now, I'd create a meta-template and use a helper to draw it.

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

I'm writing this out of my head, so it probably won't work out of the box but it should get you started. I've used a similar method with success here - for overlays.

来源：https://stackoverflow.com/questions/19166374/create-a-reusable-template-for-tabs-in-meteor

标签

tabs

scope

meteor