流星

Question

創建標籤可重複使用的模板

所以我有

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

這樣

<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」），但有他們自己的'範圍'可以這麼說。我如何實現這一目標？

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 - 用於疊加。