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

本文介绍了为 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.