为 Meteor 中的选项卡创建可重复使用的模板 [英] Create a reusable template for tabs in Meteor
问题描述
所以我有一个这样的模板
<li activetab='tab1'>stream</li><li activetab='tab2'>项目</li>
<div>{{#if activeTabIs "tab1"}}{{>tabBody1}}{{/如果}}{{#if activeTabIs "tab2"}}{{>tabBody2}}{{/如果}}与
Template.tabs.events({'click .tabs li':函数(事件，模板){Session.set("activeTab", $(event.currentTarget).attr("activetab"));}});和
Template.tabs.activeTabIs = function(tab) {return Session.get("activeTab") === tab;}但我希望在整个页面上都有多个这样的模板.他们不应该重复使用 Session.get("activeTab") 而是有自己的范围"可以这么说.我如何实现这一目标?
当 Meteor UI 推出时，这种事情有望变得更容易.现在，我会创建一个元模板并使用助手来绘制它.
<ul>{{#每个标签}}<li>{{name}}</li>{{/每个}}{{当前标签}}Template.tabs.currentTab = function() {var tab = _.find(this.data, function(t) {返回 t.active === 真；});if(tab) 返回模板[tab.template]();返回 '';}<模板名称=东西">{{#with tabList}}{{>标签}}{{/with}}Template.something.tabList = function() {返回 [{名称:'流'，模板:'流'}，{名称:'项目'，模板:'项目'，活动:真}，];}我正在写这个，所以它可能无法立即使用，但它应该可以帮助您入门.我已经成功使用了类似的方法这里 - 用于叠加.
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?
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.
这篇关于为 Meteor 中的选项卡创建可重复使用的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
