Using tabs in meteoric as a 3-position toggle

help
1

Just learning meteor to build my first real app. As part of that I am using Meteoric, a package that brings the Ionic framework to meteor. I don’t know Ionic either, it jsut seemed like a good ideal. So I am learning Metoer,Ionic & Meteoric all at the same time.

I really like the graphic style of the tabs interface that Ionic provides and I am using in on one of my pages. However, I don’t need it to load 3 different pages, I am just using the tabs as a 3 position toggle: Ban, Allow, Require. When a tab is pressed all I want is that attirbut to be changed in that record in mongo. (and reflect the current state of that toggle).

Currently what I am doing is I have 3 different paths in iron router that all point to the same template. This is mostly working but this feels like it is not the right way to do this. There feels like there must be a direct way to just use the tabs style with just binding a data-action to the button without providing a path and setting things as active but I am uncertain…so I am posting a question here. (didn’t feel like I should post it in the meteoric issue tracker, since I assume it is just something about my not understanding how everything works)

thanks in advance!

2

stackoverflow?

also you should post a short code sample. i know meteoric but it’s hard to read your three paragraphs above to even parse the problem.

3

First, thanks for the suggestion of stackoverflow. I am new to the meteor community so I wasn’t sure where over all where these sorts of questions were most likely to get an answer…

Secondly, I feel foolish for not including code. That would have made things so much clearer.

<template name="_workingtabs">
  {{#ionTabs style="ios"}}
    {{> ionTab title="Ban"  iconOff="ios-home-outline" iconOn="ios-home" path="ban" }}
    {{> ionTab title="Allow" iconOff="ios-star-outline" iconOn="ios-star" path="allow" }}
    {{> ionTab title="Require" iconOff="ios-heart-outline" iconOn="ios-heart" path="require" }}
  {{/ionTabs}}
</template>

which works, but I don’t want a page to, I just wanted the tabs at the bottom so I could trigger events off of them. I ended up looking at the meteoric tab code and duplicating it with a few customization that worked exactly the way I wanted. I still feel like there might be a way to make it work with a standard meteoric, but I couldn’t think of one by looking at the code.

matt

4

so

is this part the question? or is this just a memo to yourself?
what’s a “page to”? a transition? you don’t want separate pages? then what do you need tabs for? still confused.

5

What happens when you set the path to “home” for each tab?

As long as a click on any of the tabs displays the “home” template, then you can use the events map on _workingtabs to add click events for each tab, where the click will change, say, a Session variable – something like Session.set('banAllowRequire','ban').

Then, when writing to the database, use the Session variable to set the value of the relevant field - MyCollection.insert({status: Session.get('allowBanRequire')}).

Sorry, I haven’t used meteoric, meaning I don’t know the markup that #ionTabs produces, so I’m not sure which element to bind the events to, but if you use the dev tools in the browser to look at the html, you should find something to target.

Good luck! (It’s worth persisting with this stuff!)

1 Like
6

Can’t you just make buttons that look like tabs through css? It looks like that’s what you want. Radio buttons, if one should always be selected.

7

@efng There’s a couple things I would do differently:

#1 Don’t use the meteoric ionTab helpers, just use the standard Ionic markup, e.g.:

<div class="tabs tabs-icon-top">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    Ban
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    Allow
  </a>
  <a class="tab-item">
    <i class="icon ion-heart"></i>
    Require
  </a>
</div>

#2 You’re right, you don’t want paths/routes, you just want event handlers. To do so:

Add a unique identifier to each tab (the simplest would be an ID):

<a class="tab-item" id="tab-ban">

Then in your template, add an event handler to respond and change the collection attribute"

Template.yourTemplate.events({
  'click #tab-ban': function(event, template) {
    event.preventDefault();
    // Modify your collection here
  }
});
2 Likes
8

First let me say how much I have enjoyed using meteroic. It has not only simplifed things, it has been wonderful to go through and see how you did things. It has helped me learn a great deal.

Secondly, it is good to know there isn’t a way to do it directly with meteoric. There was that fear that there was something obvous I was missing…

Part of what I liked about how meteoric has the tabs are setup is you can setup an on & off icons for the tabs. I cribbed from you tabs example of Session.set(‘ionTab.current’, path) to trigger the on/off icons & for my event handelers.

9

possibly. I got something working but it might be worth me goign back and looking if I can use ionic to style checkboxes directly the way I want.

10

This is almost exactly what I did. I did use a session var, but I also wanted the icon’s to toggle between on & of, which can’t happen if they all have the same path information…also, if i remember correctly, it would reload the page, which I didn’t want to trigger.

11

that moment when you look back at what you wrote and go,“I have no idea…”

12

Way late to this, but you can also keep the meteoric ionTabs and bind to the class or id of a tab, as opposed to your own markup.

{{#ionTabs class="tabs-icon-top"}}
    {{> ionTab class="beer" title="beer" iconOff="ios-pint-outline" iconOn="ios-pint"}}
{{/ionTabs}}

Then bind to the class beer:

Template.Tabs.events({
  "click .beer": function(e, t) {
  // do stuff...