Help with changing class and rerendering components

help
1

I am running into a problem where I have a list of tabs halfway down a page that are supposed to display seperate information depending on which one is clicked.

<li><a>Tab1</a></li>
<li class="is-active"><a>Tab2</a></li>

basically when I click on Tab1 I want to add the ‘is-active’ class to it and remove the ‘is-active’ class from Tab2. Also, I want to then render {{> Tab1}} (which I am not displaying, because I dont know how to go about that).

Sorry for being so vague, I feel like I am just missing something really simple here.

Thanks!

2

I have tabs on my app as well and use Blaze and reactivity. Here is a very simplified approach how you could do it

<template name="tabs">
 <ul>
  <li class="{{tabActive "tab1"}}"><a id="tab1">Tab1</a></li>
  <li class="{{tabActive "tab2"}}"><a id="tab2">Tab2</a></li>
 </ul>
 {{Template.dynamic template=activeTab}}
</template>
<template name="tab1">
 Tab1
</template>
<template name="tab2">
 Tab2
</template>

Template.tabs.onCreated(function(){
 var instance = this;
 instance.activeTab = new ReactiveVar('tab1');
}
Template.tabs.helpers({
 tabActive(tab) {
  var instance = Template.instance();
  return tab == instance.activeTab.get() ? 'is-active' : '';
 },
 activeTab() {
  return Template.instance().activeTab.get();
 }
});
2 Likes
3

Thank you. I eventually figured out a way to do it, but instead of using a helper, I used a click event with jquery to grab the content of the tab and set a reactive-var that way. I think yours is a much simpler/better approach!

4

Hmm, maybe I need to go back to how I originally had it, because with this example, clicking does nothing, unless I am misunderstanding?

5

I am stupid. Forgot to add events to the template. For this to work you need to add id=tab1 etc to your links

Template.tabs.events({
 'click a'(event, instance){
  instance.activeTab.set(event.currentTarget.id)
 }
})
1 Like